bugfix for layout

g0v · Mar 18, 2024 · 3032d43 · 3032d43
1 parent ee27136
commit 3032d43
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 37 deletions.
diff --git 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;
 }
diff --git 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
@@ -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,
         })}>
-        <div className={classes.root}>
-          <Switch>
-            <Route path="/app" component={App} />
-            {user ?
-              <Route path="/">
-                <App user={user} />
-              </Route>:
-              <React.Fragment>
-                {publicRoutes.map(({ path, exact, component }, index)=>(
-                  <Route key={index} path={path} exact={exact} component={component} />
-                ))}
-              </React.Fragment>}
-          </Switch>
-        </div>
+        <Switch>
+          <Route path="/app" component={App} />
+          {user ?
+            <Route path="/">
+              <App user={user} />
+            </Route>:
+            <React.Fragment>
+              {publicRoutes.map(({ path, exact, component }, index)=>(
+                <Route key={index} path={path} exact={exact} component={component} />
+              ))}
+            </React.Fragment>}
+        </Switch>
       </div>
     </Router>
   );
@@ -243,7 +267,7 @@ ReactDOM.render(
           closeOnToastrClick={false}/>
       </div>
     </Provider>
-    <AmplifyProvider>
+    <AmplifyProvider theme={amplifyTheme}>
       <ReactApp />
     </AmplifyProvider>
   </ThemeProvider>,