リファクタリング

traPtitech · Oct 28, 2024 · e144f28 · e144f28
1 parent 47afa0f
commit e144f28
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 28 deletions.
diff --git a/dashboard/src/components/layouts/ErrorView.tsx b/dashboard/src/components/layouts/ErrorView.tsx
@@ -1,18 +1,8 @@
 import { A } from '@solidjs/router'
 import { type Component, Show } from 'solid-js'
-import { styled } from '/@/components/styled-components'
-import { colorVars } from '/@/theme'
 import { Button } from '../UI/Button'
 import { MaterialSymbols } from '../UI/MaterialSymbols'
 
-const Container = styled('div', 'flex w-full flex-col items-center justify-center gap-4')
-
-const Title = styled('h2', 'h2-bold text-accent-error')
-
-const Message = styled('p', 'caption-medium text-text-grey')
-
-const ButtonsContainer = styled('div', 'flex flex-col gap-2')
-
 const ErrorView: Component<{
   error: unknown
 }> = (props) => {
@@ -21,15 +11,15 @@ const ErrorView: Component<{
   }
 
   return (
-    <Container>
-      <MaterialSymbols fill displaySize={64} color={colorVars.semantic.accent.error}>
+    <div class="flex w-full flex-col items-center justify-center gap-4">
+      <MaterialSymbols fill displaySize={64} class="text-accent-error">
         error
       </MaterialSymbols>
-      <Title>An error has occurred</Title>
+      <h2 class="h2-bold text-accent-error">An error has occurred</h2>
       <Show when={props.error instanceof Error}>
-        <Message>{(props.error as Error).message}</Message>
+        <p class="caption-medium text-text-grey">{(props.error as Error).message}</p>
       </Show>
-      <ButtonsContainer>
+      <div class="flex flex-col gap-2">
         <A href="/">
           <Button size="medium" variants="border" leftIcon={<MaterialSymbols>arrow_back</MaterialSymbols>}>
             Back to Home
@@ -43,8 +33,8 @@ const ErrorView: Component<{
         >
           Reload Page
         </Button>
-      </ButtonsContainer>
-    </Container>
+      </div>
+    </div>
   )
 }
 

diff --git a/dashboard/src/components/layouts/MainView.tsx b/dashboard/src/components/layouts/MainView.tsx
@@ -12,9 +12,7 @@ export const MainViewContainer: ParentComponent<ComponentProps<'div'> & VariantP
     class={clsx(
       'relative h-full w-full px-[max(calc(50%-500px))] pt-10 pb-18 max-md:px-4',
       props.background === 'grey' ? 'bg-ui-background' : 'bg-ui-primary',
-      props.scrollable || props.scrollable === undefined
-        ? 'scrollbar-gutter-stable overflow-y-auto'
-        : 'scrollbar-gutter-auto overflow-y-hidden',
+      props.scrollable ?? true ? 'scrollbar-gutter-stable overflow-y-auto' : 'scrollbar-gutter-auto overflow-y-hidden',
       props.class,
     )}
   />

diff --git a/dashboard/src/components/layouts/WithHeader.tsx b/dashboard/src/components/layouts/WithHeader.tsx
@@ -1,16 +1,11 @@
 import type { ParentComponent } from 'solid-js'
-import { styled } from '/@/components/styled-components'
 import { Header } from '../templates/Header'
 
-const Container = styled('div', 'grid h-full w-full grid-cols-1 grid-rows-[auto_1fr]')
-
-const Body = styled('div', 'h-full w-full overflow-y-auto')
-
 export const WithHeader: ParentComponent = (props) => {
   return (
-    <Container>
+    <div class="grid h-full w-full grid-cols-1 grid-rows-[auto_1fr]">
       <Header />
-      <Body>{props.children}</Body>
-    </Container>
+      <div class="h-full w-full overflow-y-auto">{props.children}</div>
+    </div>
   )
 }