Merge pull request #593 from discoverfinancial/fix-style-issues

Fix style issues
finos · Sep 20, 2023 · 6ee24a1 · 6ee24a1
2 parents 4bc0c17 + b9424a9
commit 6ee24a1
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 11 deletions.
diff --git a/code/src/ui/src/mui-a11y-tb/themes/Theme.css b/code/src/ui/src/mui-a11y-tb/themes/Theme.css
@@ -493,8 +493,6 @@ section:has( .quote) {
 }
 .colored-title {
   color: var(--text-gradient-a);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
 }
 /* MOLECULES */
 /* avatars */
@@ -1144,6 +1142,10 @@ button.MuiButtonBase-root.small-btn.black:not(.MuiButton-outlined):not(.MuiButto
   border: 1px solid var(--border);
 }
 
+.MuiList-root .MuiCollapse-root .MuiList-root {
+  border: none;
+}
+
 /* hotlinks */
 a {
   color: var(--hotlink);

diff --git a/code/src/ui/src/pages/DesignSystemPage.css b/code/src/ui/src/pages/DesignSystemPage.css
@@ -68,6 +68,11 @@
     margin-left: 0px;
 }
 
+.section-body .subtitle1,
+.section-demos .subtitle1 {
+    margin-bottom: var(--spacing-2)
+}
+
 .form-columns {
     display: flex;
     gap: 16px;

diff --git a/code/src/ui/src/pages/components/typography/StatStylesComponent.tsx b/code/src/ui/src/pages/components/typography/StatStylesComponent.tsx
@@ -31,7 +31,7 @@ interface Props {
 export const StatStylesComponent: React.FC<Props> = () => {
     return (
         <div className="content">
-        <HeadingSection title='Typography' heading='Small Text Styles'></HeadingSection>
+        <HeadingSection title='Typography' heading='STAT Text Styles'></HeadingSection>
         <ExampleSection>
           <TypographyBox cssPrefix={statCssPrefix} sampleTitle='STAT'></TypographyBox>
         </ExampleSection>

diff --git a/code/src/ui/src/pages/content/components/ComponentsContent.tsx b/code/src/ui/src/pages/content/components/ComponentsContent.tsx
@@ -343,7 +343,7 @@ export const ComponentsContent: React.FC<Props> = ({ user, designSystem }) => {
                     {showComponent === "typographySmallFontsStyles" &&
                         <SmallFontsStylesComponent />
                     }
-                    {showComponent === "statSmallFontsStyles" &&
+                    {showComponent === "statFontsStyles" &&
                         <StatStylesComponent />
                     }
                     {showComponent === "cardsStandard" &&

diff --git a/code/src/ui/src/pages/molecules/ModalMolecule.tsx b/code/src/ui/src/pages/molecules/ModalMolecule.tsx
@@ -35,7 +35,7 @@ export const ModalMolecule: React.FC<Props> = ({ modalMolecule }) => {
                 A modal is a window within an application that disables the main window but keeps it visible, with the modal window as a child window in front of it.
             </HeadingSection>
             <ExampleSection>
-                <div className="caption">Sample Modal</div>
+                <div className="subtitle1">Sample Modal</div>
                 <Button variant="contained" onClick={() => setSampleModalIsOpen(true)}>Launch Demo Modal</Button>
                 <SettingsSection>
                     <div className="form-row">

diff --git a/code/src/ui/src/pages/molecules/SpacingMolecule.tsx b/code/src/ui/src/pages/molecules/SpacingMolecule.tsx
@@ -3,7 +3,7 @@
  * Licensed under MIT License. See License.txt in the project root for license information
  */
 import React, { useState, useEffect } from 'react';
-import { Switch } from '@mui/material';
+import { FormControlLabel, FormGroup, Grid, Switch } from '@mui/material';
 import { Spacing } from 'a11y-theme-builder-sdk';
 import { GeneratedCodeSection } from '../content/GeneratedCodeSection';
 import { HeadingSection } from '../content/HeadingSection';
@@ -44,11 +44,22 @@ export const SpacingMolecule: React.FC<Props> = ({ spacingMolecule }) => {
             <HeadingSection item={spacingMolecule} title="Assign Spacing">
                 The Spacing Molecule controls the amount of space between lines of text within a paragraph, and the paragraphs themselves.
             </HeadingSection>
-            <Switch
-                checked={showGuidelines}
-                onChange={() => setShowGuidelines(!showGuidelines)}
-                inputProps={{ 'aria-label': 'controlled' }}
-            />
+            <Grid container spacing={2} columns={12} margin={2}>
+                <Grid item spacing={2} lg={12} md={12} sm={12}>
+                    <FormGroup>
+                        <FormControlLabel
+                            control={
+                                <Switch
+                                    checked={showGuidelines}
+                                    onChange={() => setShowGuidelines(!showGuidelines)}
+                                    inputProps={{ 'aria-label': 'controlled' }}
+                                />
+                            }
+                            label={<div className="overline-large">Show Guidelines</div>}
+                        />
+                    </FormGroup>
+                </Grid>
+            </Grid>
             <ExampleSection>
                 <div style={sectionStyle}>
                     <h2>Sample</h2>