students list layout

src/pages/style.ts

@@ -86,8 +86,13 @@ export const Wrapper = styled.div`
 export const UnorderList = styled.ul`
   padding-left: 0px;
   height: 600px;
-  overflow: auto;
+  /* overflow: auto; */
+  justify-content: space-evenly;
   padding-right: 20px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
 `
 
 export const Svg = styled.svg`
@@ -114,22 +119,28 @@ export const LessonItem = styled.li<{ warn?: boolean }>`
   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: #fde3c5;
-          color: #919191;
-          box-shadow: inset 3px 2px 7px #c9b5a9;
+          background-color: #000000;
+          opacity: .7;
+          color: #e4e4e4;
         `
       : ''}
 `
 
 export const AddMissedButton = styled.button`
-  float: right;
+  position: absolute;
+  bottom: 8px;
+  right: 12px;
   border: none;
   background-color: #00000000;
-  opacity: 0.1;
+  opacity: 0.2;
 
   :hover {
     cursor: pointer;
@@ -180,3 +191,9 @@ export const AddButton = styled.button`
     box-shadow: 3px 2px 5px #00000038;
   }
 `
+
+export const Avatar = styled.img`
+  width: 96px;
+  height: 96px;
+  margin: 0 auto;
+`;