Commit cfb80073 authored by Sam Gluck's avatar Sam Gluck
Browse files

Implement theming and start writing style guide in code;

parent d861d6b6
......@@ -26,6 +26,7 @@ const env = getClientEnvironment(publicUrl);
// It is focused on developer experience and fast rebuilds.
// The production configuration is different and lives in a separate file.
module.exports = {
mode: 'development',
// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
// See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
devtool: 'cheap-module-source-map',
......
......@@ -39,6 +39,7 @@ const cssFilename = 'static/css/[name].[contenthash:8].css';
// It compiles slowly and is focused on producing a fast and minimal bundle.
// The development configuration is different and lives in a separate file.
module.exports = {
mode: 'production',
// Don't attempt to continue if there are any errors.
bail: true,
// We generate sourcemaps in production. This is slow but gives good results.
......@@ -275,30 +276,29 @@ module.exports = {
}),
],
optimization: {
minimize: false,
// minimizer: [
// new TerserPlugin({
// cache: true,
// parallel: true,
// terserOptions: {
// compress: {
// warnings: false,
// // Disabled because of an issue with Uglify breaking seemingly valid code:
// // https://github.com/facebookincubator/create-react-app/issues/2376
// // Pending further investigation:
// // https://github.com/mishoo/UglifyJS2/issues/2011
// comparisons: false,
// },
// output: {
// comments: false,
// // Turned on because emoji and regex is not minified properly using default
// // https://github.com/facebookincubator/create-react-app/issues/2488
// ascii_only: true,
// },
// sourceMap: shouldUseSourceMap
// }
// })
// ],
minimizer: [
new TerserPlugin({
cache: true,
parallel: true,
terserOptions: {
compress: {
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebookincubator/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
},
output: {
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebookincubator/create-react-app/issues/2488
ascii_only: true,
},
sourceMap: shouldUseSourceMap
}
})
],
},
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
......
......@@ -19,6 +19,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<title>MoodleNet</title>
</head>
<body>
......
.Body {
padding: 15px;
}
.Menu {
z-index: 1;
position: fixed;
top: 0;
right: 0;
padding: 15px;
border-left: 1px solid darkgrey;
border-bottom: 1px solid darkgrey;
border-bottom-left-radius: 5px;
background-color: white;
display: flex;
flex-direction: row;
box-shadow: 0 0 3px lightgrey;
}
.Menu__item:not(:last-child) {
margin-right: 10px;
}
.Card {
background-color: white;
padding: 15px;
box-shadow: 0 0 3px lightgrey;
border-radius: 5px;
margin-bottom: 20px;
}
.H1 {
margin: 0 0 30px 0;
}
......@@ -4,21 +4,18 @@ import '@zendeskgarden/react-grid/dist/styles.css';
import '@zendeskgarden/react-buttons/dist/styles.css';
import '@zendeskgarden/react-menus/dist/styles.css';
import '@zendeskgarden/react-avatars/dist/styles.css';
import '../../../App.css';
import Nav from '../Nav/Nav';
import CommunitiesFeatured from '../../../pages/communities.featured/CommunitiesFeatured';
import Menu from '../Menu/Menu';
import { moodlenet } from '../../../themes/themes';
const { ThemeProvider } = require('@zendeskgarden/react-theming');
const { Chrome, Body } = require('@zendeskgarden/react-chrome');
const { Nav } = require('../Nav/Nav');
const { Menu } = require('../Menu/Menu');
const {
CommunitiesFeatured
} = require('../../../pages/communities.featured/CommunitiesFeatured');
const { theme } = require('../../../theme');
export class App extends React.Component {
export default class App extends React.Component {
render() {
return (
<ThemeProvider theme={theme}>
<ThemeProvider theme={moodlenet}>
<Chrome className="App">
<Nav />
<Body className="Body">
......
......@@ -6,49 +6,51 @@ const avatar = require('../../../static/img/avatar.png');
const search = require('../../../static/img/search.png');
const notifications = require('../../../static/img/notifications.png');
export const Menu = () => (
<div className="Menu">
<div className="Menu__item">
<ZenMenu
trigger={({ ref }) => (
<img ref={ref} width={30} height={30} src={search} alt="Search" />
)}
>
<Item>1</Item>
<Item>2</Item>
<Item>3</Item>
</ZenMenu>
export default function Menu() {
return (
<div className="Menu">
<div className="Menu__item">
<ZenMenu
trigger={({ ref }) => (
<img ref={ref} width={30} height={30} src={search} alt="Search" />
)}
>
<Item>1</Item>
<Item>2</Item>
<Item>3</Item>
</ZenMenu>
</div>
<div className="Menu__item">
<ZenMenu
trigger={({ ref }) => (
<img
ref={ref}
width={30}
height={30}
src={notifications}
alt="Notifications"
/>
)}
>
<Item>1</Item>
<Item>2</Item>
<Item>3</Item>
</ZenMenu>
</div>
<div className="Menu__item">
<ZenMenu
trigger={({ ref }) => (
<Avatar innerRef={ref}>
<img src={avatar} alt="Joe Bloggs" />
</Avatar>
)}
>
<Item>Your Profile</Item>
<Item>Settings</Item>
<Item>About MoodleNet</Item>
<Item>Sign out</Item>
</ZenMenu>
</div>
</div>
<div className="Menu__item">
<ZenMenu
trigger={({ ref }) => (
<img
ref={ref}
width={30}
height={30}
src={notifications}
alt="Notifications"
/>
)}
>
<Item>1</Item>
<Item>2</Item>
<Item>3</Item>
</ZenMenu>
</div>
<div className="Menu__item">
<ZenMenu
trigger={({ ref }) => (
<Avatar innerRef={ref}>
<img src={avatar} alt="Joe Bloggs" />
</Avatar>
)}
>
<Item>Your Profile</Item>
<Item>Settings</Item>
<Item>About MoodleNet</Item>
<Item>Sign out</Item>
</ZenMenu>
</div>
</div>
);
);
}
......@@ -48,7 +48,7 @@ const subNavItems = {
)
};
export class Nav extends React.Component {
export default class Nav extends React.Component {
state: any = {
navOpen: true,
activeNav: NavItems.Communities,
......
import * as React from 'react';
const { Button } = require('@zendeskgarden/react-buttons');
const { Button: ZenButton } = require('@zendeskgarden/react-buttons');
export const MoodleButton = ({ children }) => {
return <Button>{children}</Button>;
};
export default function Button({ children }) {
return <ZenButton>{children}</ZenButton>;
}
import * as React from 'react';
const { H4 } = require('../../typography/H4/H4');
const { MoodleButton } = require('../Button/Button');
export const Card = ({ title }) => (
<div className="Card">
<H4>{title}</H4>
<MoodleButton>View</MoodleButton>
</div>
);
import styled from '../../../themes/styled';
import { moodlenet } from '../../../themes/themes';
import H4 from '../../typography/H4/H4';
import Button from '../Button/Button';
export const StyledCard = styled.div`
background-color: white;
padding: 15px;
box-shadow: 0 0 3px lightgrey;
border-radius: 5px;
margin-bottom: 20px;
border-top: 1px solid ${props => props.theme.styles.colour.primary};
`;
StyledCard.defaultProps = {
theme: {
styles: moodlenet
}
};
export type CardProps = {
title: string;
};
const Card: React.SFC<CardProps> = ({ title }) => {
return (
<StyledCard>
<H4>{title}</H4>
<Button>View</Button>
</StyledCard>
);
};
export default Card;
import * as React from 'react';
import { XXL } from '@zendeskgarden/react-typography';
import { XXXL } from '@zendeskgarden/react-typography';
export const H1 = ({ children }) => <XXL className="H1">{children}</XXL>;
export default function H1({ children }) {
return <XXXL className="H1">{children}</XXXL>;
}
H2 example:
```js
<H2>Hello world</H2>
```
import * as React from 'react';
import { XXL } from '@zendeskgarden/react-typography';
export default function H2({ children }) {
return <XXL className="H2">{children}</XXL>;
}
H3 example:
```js
<H3>Hello world</H3>
```
import * as React from 'react';
import { XL } from '@zendeskgarden/react-typography';
export default function H3({ children }) {
return <XL className="H3">{children}</XL>;
}
import * as React from 'react';
import { MD } from '@zendeskgarden/react-typography';
import { LG } from '@zendeskgarden/react-typography';
export const H4 = ({ children }) => <MD className="H4">{children}</MD>;
export default function H4({ children }) {
return <LG className="H4">{children}</LG>;
}
H5 example:
```js
<H5>Hello world</H5>
```
import * as React from 'react';
import { MD } from '@zendeskgarden/react-typography';
export default function H5({ children }) {
return <MD className="H5">{children}</MD>;
}
H6 example:
```js
<H6>Hello world</H6>
```
import * as React from 'react';
import { SM } from '@zendeskgarden/react-typography';
export function H6({ children }) {
return <SM className="H6">{children}</SM>;
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment