Cleanup button styles and links

openstax · Nov 30, 2023 · 7977776 · 7977776
1 parent c870ebd
commit 7977776
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 86 deletions.
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
@@ -3,8 +3,6 @@ export * from '@nathanstitt/sundry/form'
 export * from '@nathanstitt/sundry/menu'
 export * from '@nathanstitt/sundry/modal'
 
-export * from './styled-buttons'
-
 export * from './ox-colored-stripe'
 export * from './loading-animation'
 export * from './ui-states'

diff --git a/frontend/src/components/styled-buttons.tsx b/frontend/src/components/styled-buttons.tsx
diff --git a/frontend/src/components/ui-states.tsx b/frontend/src/components/ui-states.tsx
@@ -1,8 +1,9 @@
 import { React, useEffect, useLocation } from '@common'
 import { Button } from '@components'
-import { LinkButton } from './styled-buttons'
 import { OXColoredStripe } from './ox-colored-stripe'
-import { reloadOnce, forceReload } from '../lib/reload';
+import { forceReload, reloadOnce } from '../lib/reload';
+import { NavLink } from 'react-router-dom';
+import { Container } from '@mantine/core';
 
 export const ErrorPage: React.FC<{ error: any }> = ({ error }) => {
     useEffect(reloadOnce, [])
@@ -27,12 +28,12 @@ export const PageNotFound: React.FC<{ name?: string }> = ({ name }) => {
     return (
         <div className="invalid-page not-found">
             <OXColoredStripe />
-            <div className="container pt-2">
+            <Container>
                 <h1>
                     Uh-oh, the <code>{path}</code> was not found
                 </h1>
-                <LinkButton primary to="/">Go Home</LinkButton>
-            </div>
+                <NavLink to="/">Go Home</NavLink>
+            </Container>
         </div>
     );
 }
diff --git a/frontend/src/screens/analysis/edit.tsx b/frontend/src/screens/analysis/edit.tsx
@@ -17,6 +17,7 @@ import { getAnalysisValidationSchema, useFetchAnalyses } from '@models'
 import { errorToString, useApi, useQueryParam } from '@lib'
 import { SelectedStudies } from './selected-studies'
 import { ResearcherFAQ } from './researcher-faq';
+import { Button } from '@mantine/core';
 
 interface EditAnalysisProps {
     analyses: Analysis[]
@@ -161,13 +162,14 @@ const BottomBar = () => {
     return (
         <Box className='fixed-bottom bg-white mt-auto' css={{ minHeight: 80, boxShadow: `0px -3px 10px rgba(219, 219, 219, 0.5)` }}>
             <Box className='container-lg' align='center' justify='end'>
-                <FormSaveButton
+                <Button
+                    type='submit'
+                    color='blue'
                     data-testid='save-analysis-button'
-                    className='btn-researcher-primary'
                     disabled={!isValid}
                 >
                     Save & Continue
-                </FormSaveButton>
+                </Button>
             </Box>
         </Box>
     )

diff --git a/frontend/src/screens/analysis/overview.tsx b/frontend/src/screens/analysis/overview.tsx
@@ -7,6 +7,7 @@ import { FAQSection } from './researcher-faq';
 import { Link } from 'react-router-dom';
 import { RunsTable } from './runs-table';
 import { ENV } from '@lib'
+import { Button } from '@mantine/core';
 
 export const AnalysisOverview: FC = () => {
     const { analysisId } = useParams<string>();
@@ -230,12 +231,9 @@ const BottomBar: FC<{analysis: Analysis}> = ({ analysis }) => {
                         <span>Back to Analysis Basics</span>
                     </Box>
                 </Link>
-                <button
-                    className="btn btn-primary btn-researcher-primary"
-                    onClick={openEditor}
-                >
+                <Button color='blue' onClick={openEditor}>
                     Open R Studio
-                </button>
+                </Button>
             </Box>
         </Box>
     )

diff --git a/frontend/src/screens/dev/index.tsx b/frontend/src/screens/dev/index.tsx
@@ -1,9 +1,9 @@
 import { React, useEffect, useNavigate, useState } from '@common'
 import { capitalize, useCurrentUser, useFetchEnvironment } from '@lib'
 import { AvailableUsers } from './users'
-import { LinkButton } from '@components'
 import { loginAsUser } from '@models';
 import { Container, Stack } from '@mantine/core';
+import { NavLink } from 'react-router-dom';
 
 interface UserCardProps {
     users: AvailableUsers
@@ -12,8 +12,8 @@ interface UserCardProps {
 }
 
 const UserCard:React.FC<UserCardProps> = ({ users, type, becomeUser }) => {
-
     if (!users[type]?.length) return null
+
     return (
         <div className="col-6">
             <div className="card">
@@ -73,13 +73,14 @@ const LoggedInUser = () => {
     const currentUser = useCurrentUser()
 
     if (!currentUser.userId) return null
+
     return (
         <Stack>
             <nav className="navbar fixed-top navbar-light py-1 bg-light">
                 <Container>
-                    <LinkButton secondary to="/">
+                    <NavLink to="/">
                         Home
-                    </LinkButton>
+                    </NavLink>
                 </Container>
             </nav>
             <h3>Logged in as: {currentUser.userId}</h3>

diff --git a/frontend/src/screens/researcher/studies/overview/edit-submitted-study.tsx b/frontend/src/screens/researcher/studies/overview/edit-submitted-study.tsx
@@ -185,9 +185,9 @@ const FormActions: FC<{study: Study}> = ({ study }) => {
 
     return (
         <Box className='container-lg' align='center' justify='end'>
-            <FormSaveButton className='btn-researcher-primary mt-2' disabled={!isValid || !isDirty}>
+            <Button type='submit' color='blue' disabled={!isValid || !isDirty}>
                 Publish Changes
-            </FormSaveButton>
+            </Button>
         </Box>
     )
 }

diff --git a/frontend/src/styles/main.scss b/frontend/src/styles/main.scss
@@ -21,38 +21,3 @@ $link-color: #0d6efd;
         color: $gray-200;
     }
 }
-
-.btn-researcher-primary {
-    --bs-btn-font-weight: 600;
-    --bs-btn-color: var(--bs-white);
-    --bs-btn-disabled-color: var(--bs-black);
-    --bs-btn-bg: #255ED3;
-    --bs-btn-border-color: #255ED3;
-    --bs-btn-border-radius: .5rem;
-    --bs-btn-hover-color: var(--bs-white);
-    --bs-btn-hover-bg: #{shade-color(#255ED3, 10%)};
-    --bs-btn-hover-border-color: #{shade-color(#255ED3, 10%)};
-    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
-    --bs-btn-active-color: var(--bs-btn-hover-color);
-    --bs-btn-active-bg: #{shade-color(#255ED3, 20%)};
-    --bs-btn-active-border-color: #{shade-color(#255ED3, 20%)};
-    --bs-btn-disabled-bg: #{shade-color(#DBDBDB, 10%)};
-    --bs-btn-disabled-border-color: var(--bs-gray);
-}
-
-.btn-researcher-secondary {
-    --bs-btn-font-weight: 600;
-    --bs-btn-color: #255ED3;
-    --bs-btn-bg: var(--bs-white);
-    --bs-btn-border-color: #255ED3;
-    --bs-btn-border-radius: .5rem;
-    --bs-btn-hover-color: #255ED3;
-    --bs-btn-hover-bg: #{shade-color(#FFF, 10%)};
-    --bs-btn-hover-border-color: #{shade-color(#255ED3, 10%)};
-    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
-    --bs-btn-active-color: var(--bs-btn-hover-color);
-    --bs-btn-active-bg: #{shade-color(#FFF, 20%)};
-    --bs-btn-active-border-color: #{shade-color(#FFF, 20%)};
-    --bs-btn-disabled-bg: #{shade-color(#DBDBDB, 10%)};
-    --bs-btn-disabled-border-color: var(--bs-gray);
-}