diff --git a/src/Amplify.css b/src/Amplify.css index 78ad618..b6ec5e7 100644 --- a/src/Amplify.css +++ b/src/Amplify.css @@ -1,20 +1,27 @@ /* https://docs.amplify.aws/ui/customization/theming/q/framework/react */ -:root { +/* body, :root, .MuiDialog-root { --amplify-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - --amplify-primary-color: #C42126; - --amplify-primary-tint: #ff363c; - --amplify-primary-shade: #821114; -} + sans-serif!important;; + --amplify-primary-color: #00913A!important; + --amplify-primary-tint: #68b386!important;; + --amplify-primary-shade: #89C9A3!important;; +} */ + +[data-amplify-authenticator] { + --amplify-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif!important;; + /* --amplify-components-checkbox-icon-background-color: #00913A; + --amplify-components-tabs-item-active-border-color: #00913A; + --amplify-components-tabs-item-active-color: #00913A; + --amplify-colors-font-primary: #00913A; + --amplify-components-button-primary-background-color: #00913A; + --amplify-components-tabs-item-hover-color: #68b386; + --amplify-components-button-primary-hover-background-color: #68b386; */ -amplify-authenticator, .amplify-authenticator { - display: flex; justify-content: center; align-items: flex-start; - flex: 1; - margin-top: -64px; - height: calc(100vh - 64px); - background-color: #ebebeb; - padding: 32px; + padding: 64px; + --amplify-components-autocomplete-menu-options-max-height: 120px; } \ No newline at end of file diff --git a/src/components/ProjectCard/ProjectCard.js b/src/components/ProjectCard/ProjectCard.js index 243238a..cb3dc18 100644 --- a/src/components/ProjectCard/ProjectCard.js +++ b/src/components/ProjectCard/ProjectCard.js @@ -39,7 +39,7 @@ export default function ProjectCard({ project: inProject, projectId: inProjectId, userProject, - variant = '', + variant = 'elevation', hideSummary, }) { const classes = useStyles(); diff --git a/src/index.js b/src/index.js index 2936168..7e736d9 100644 --- a/src/index.js +++ b/src/index.js @@ -87,17 +87,43 @@ const useStyles = makeStyles((theme) => ({ }), marginLeft: 0, }, - root: { - display: 'flex', - [theme.breakpoints.up('md')]: { - overflow: 'auto', + root: {}, +})); + +const amplifyTheme = { + name: 'amplify-theme', + // https://github.com/aws-amplify/amplify-ui/tree/main/packages/ui/src/theme/tokens/components + tokens: { + components: { + authenticator: { + modal: { + backgroundColor: { + value: Colors.background.light, + }, + }, + }, }, - [theme.breakpoints.down('md')]: { - overflowX: 'hidden', + colors: { + font: { + primary: { value: Colors.primary }, + }, + brand: { + primary: { + // 10: { value: Colors.primary }, + // 20: { value: Colors.primary }, + // 30: { value: Colors.primary }, + // 40: { value: Colors.primary }, + // 50: { value: Colors.primary }, + 60: { value: Colors.primary }, + 70: { value: Colors.primary }, + 80: { value: Colors.primary }, + 90: { value: Colors.primary }, + 100: { value: Colors.primary }, + }, + }, }, - height: 'calc(100vh - 64px)', // 64px appbar + 52px footer }, -})); +}; const initialPath = history.location; // console.log(`initialPath`, initialPath); @@ -209,20 +235,18 @@ function ReactApp() { className={clsx(classes.content, { [classes.contentShift]: !open, })}> -