users screen + userCard component

src/pages/style.ts

@@ -1,63 +1,8 @@
 import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import {
-  Card
-} from '@chakra-ui/react'
+import { keyframes } from '@emotion/react'
 
 export const BreadcrumbsWrapper = styled.div`
   padding: 12px;
-`;
-
-export const MainWrapper = styled.main`
-  display: flex;
-  justify-content: center;
-  height: 100%;
-`
-
-export const InputWrapper = styled.div`
-  position: relative;
-  padding: 12px;
-  display: flex;
-  align-items: center;
-
-  @media screen and (max-width: 600px) {
-    flex-direction: column;
-  }
-`
-export const InputLabel = styled.label`
-  position: absolute;
-  top: -8px;
-  left: 24px;
-  z-index: 2;
-`
-export const InputElement = styled.input`
-  border: 1px solid #ccc;
-  padding: 12px;
-  font-size: 24px;
-  border-radius: 8px;
-  color: #117623;
-  max-width: 90vw;
-  box-shadow: inset 7px 8px 20px 8px #4990db12;
-`
-
-export const StyledCard = styled(Card)`
-  box-shadow: 2px 2px 6px #0000005c;
-  padding: 16px;
-  border-radius: 12px;
-  min-width: 400px;
-`
-
-export const ArrowImg = styled.img`
-  width: 48px;
-  height: 48px;
-`
-
-export const IconButton = styled.button`
-  border: none;
-  background-color: rgba(0, 0, 0, 0);
-  display: flex;
-  align-items: center;
-  height: 100%;
 `
 
 const reveal = keyframes`
@@ -70,23 +15,9 @@ const reveal = keyframes`
     }
 `
 
-export const StartWrapper = styled.div`
-  animation: ${reveal} 0.4s ease forwards;
-  height: calc(100vh - 300px);
-  position: relative;
-`
-
-export const Wrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 20px;
-  width: auto;
-`
-
-export const UnorderList = styled.ul`
+export const StudentList = styled.ul`
   padding-left: 0px;
   height: 600px;
-  /* overflow: auto; */
   justify-content: space-evenly;
   padding-right: 20px;
   display: flex;
@@ -95,65 +26,6 @@ export const UnorderList = styled.ul`
   gap: 8px;
 `
 
-export const Svg = styled.svg`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform-origin: 50% 50%;
-  transform: translate(-50%, -50%);
-`
-
-export const Papper = styled.div`
-  position: relative;
-  background-color: #ffffff;
-  border-radius: 12px;
-  padding: 32px 16px 16px;
-  box-shadow: 2px 2px 6px #0000005c;
-`
-
-export const LessonItem = styled.li<{ warn?: boolean }>`
-  list-style: none;
-  background-color: #ffffff;
-  padding: 16px;
-  border-radius: 12px;
-  box-shadow: 2px 2px 6px #0000005c;
-  margin-bottom: 12px;
-  transition: all 0.5;
-  position: relative;
-  /* padding-bottom: 32px; */
-  width: 180px;
-  max-height: 200px;
-
-  ${(props) =>
-    props.warn
-      ? css`
-          background-color: #000000;
-          opacity: .7;
-          color: #e4e4e4;
-        `
-      : ''}
-`
-
-export const AddMissedButton = styled.button`
-  position: absolute;
-  bottom: 8px;
-  right: 12px;
-  border: none;
-  background-color: #00000000;
-  opacity: 0.2;
-
-  :hover {
-    cursor: pointer;
-    opacity: 1;
-  }
-`
-
-export const Lessonname = styled.span`
-  display: inline-box;
-  margin-right: 12px;
-  margin-bottom: 20px;
-`
-
 export const QRCanvas = styled.canvas`
   display: block;
 `
@@ -165,35 +37,3 @@ export const ErrorSpan = styled.span`
   background-color: #d32f0b;
   border-radius: 11px;
 `
-
-export const Cross = styled.button`
-  position: absolute;
-  right: 19px;
-  top: 14px;
-  font-size: 24px;
-  padding: 7px;
-  cursor: pointer;
-  background-color: #fff;
-  border: none;
-
-  :hover {
-    background-color: #d7181812;
-    border-radius: 20px;
-  }
-`
-
-export const AddButton = styled.button`
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-
-  :hover {
-    box-shadow: 3px 2px 5px #00000038;
-  }
-`
-
-export const Avatar = styled.img`
-  width: 96px;
-  height: 96px;
-  margin: 0 auto;
-`;