some changes

assets/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+npm-debug.log

assets/src/App.tsx

@@ -5,6 +5,7 @@ import {
   Route,
   Navigate,
 } from "react-router-dom";
+import { ThemeProvider } from "styled-components";
 import { useAppDispatch, useAppSelector } from "./app/hooks";
 
 import AuthRedirect from "./components/AuthRedirect";
@@ -22,11 +23,13 @@ const Loading = () => <p>Loading</p>;
 const App: React.FC = () => {
   const dispatch = useAppDispatch();
   const state = useAppSelector((state) => state.auth.state);
+  const theme = useAppSelector((state) => state.theme);
   useEffect(() => {
     dispatch(verify());
   }, []);
   return (
     <>
+      <ThemeProvider theme={theme}>
       <GlobalStyles />
       {state == "loading" ? (
         <Loading />
@@ -102,6 +105,7 @@ const App: React.FC = () => {
           </Routes>
         </Router>
       )}
+      </ThemeProvider>
     </>
   );
 };

assets/src/app/store.ts

@@ -1,11 +1,13 @@
 import { configureStore } from "@reduxjs/toolkit";
 
 import AuthReducer from "../features/auth/auth-slice";
+import ThemeSlice from "../features/theme/theme-slice";
 import {cardDeckApiSlice} from "../features/cardDecks/cardDeck-api-slice";
 
 export const store = configureStore({
   reducer: {
     auth: AuthReducer,
+    theme: ThemeSlice,
     [cardDeckApiSlice.reducerPath]: cardDeckApiSlice.reducer
   },
   middleware: (getDefaultMiddleware) => {

assets/src/components/Card/Card.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { StyledCard } from './styled'
+
+const Card: React.FC = ({children}) => {
+  return (
+    <StyledCard>
+        {children}
+    </StyledCard>
+  )
+}
+
+export default Card

assets/src/components/Card/styled.ts

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const StyledCard = styled.div`
+border-radius: ${props => props.theme.borderRadius};
+padding: 16px;
+width: 100%;
+height: 100%;
+box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+`;

assets/src/components/Header/styled.tsx

@@ -4,8 +4,10 @@ export const HeaderWrapper = styled.div`
   left: var(--navbar-width);
   height: var(--toolbar-height);
   width: 100%;
+  align-self: flex-start;
   & > h1 {
     padding: 16px;
+    margin: 0;
     display: flex;
     align-items: center;
     height: 100%;

assets/src/components/TextareaWithLabel/TextareaWithLabel.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Card from "../Card/Card";
 import { TextareaWithLabelWrapper } from "./styled";
 
 export interface ITextareaWithLabel {
@@ -19,19 +20,21 @@ const TextareaWithLabel: React.FC<ITextareaWithLabel> = ({
   rows,
 }) => {
   return (
-    <TextareaWithLabelWrapper>
-      <label htmlFor={label}>{label}</label>
-      <textarea
-        className="textbox"
-        id={label}
-        role="textbox"
-        onChange={onChange}
-        value={value}
-        placeholder={placeholder}
-        disabled={disabled}
-        rows={rows ? rows : 4}
-      ></textarea>
-    </TextareaWithLabelWrapper>
+    <Card>
+      <TextareaWithLabelWrapper>
+        <label htmlFor={label}>{label}</label>
+        <textarea
+          className="textbox"
+          id={label}
+          role="textbox"
+          onChange={onChange}
+          value={value}
+          placeholder={placeholder}
+          disabled={disabled}
+          rows={rows ? rows : 4}
+        ></textarea>
+      </TextareaWithLabelWrapper>
+    </Card>
   );
 };
 

assets/src/features/theme/theme-slice.ts

@@ -0,0 +1,48 @@
+import { createSlice } from "@reduxjs/toolkit";
+export interface Color {
+    main: string;
+    contrastText: string;
+}
+
+export interface ColorPalette {
+    common: Color;
+    muted: Color;
+    primary: Color;
+    secondary: Color;
+}
+
+export interface Theme {
+    borderRadius: string;
+    palette: ColorPalette
+}
+
+const initialState: Theme = {
+    borderRadius: "4px",
+    palette: {
+        common: {
+            main: "#ffffff",
+            contrastText: "#222831",
+        },
+        muted: {
+            main: "#aaaaaa",
+            contrastText: "#222831"
+        },
+        primary: {
+            main: "#726a95",
+            contrastText: '#ffffff'
+        },
+        secondary: {
+            main: "#709bf0",
+            contrastText: "#ffffff",
+        }
+    }
+}
+const themeSlice = createSlice({
+    name: "theme",
+    initialState,
+    reducers: {
+    }
+})
+
+export const {} = themeSlice.actions;
+export default themeSlice.reducer;

assets/src/layouts/Base/Base.tsx

@@ -6,8 +6,8 @@ import Navbar from "../../components/Navbar/Navbar";
 const Base: React.FC = () => {
   return (
     <BaseLayoutWrapper>
-      <Navbar />
-      <Outlet />
+        <Navbar />
+        <Outlet />
     </BaseLayoutWrapper>
   );
 };

assets/src/layouts/Base/styled.tsx

@@ -3,7 +3,8 @@ import styled from "styled-components";
 export const BaseLayoutWrapper = styled.div`
   display: flex;
   padding: 0 0 0 var(--navbar-width);
+  flex-direction: column;
   width: 100%;
   height: 100%;
   overflow: hidden;
-`;
+`;

assets/src/pages/Deck/Deck.tsx

@@ -7,6 +7,7 @@ import { useFetchCardDeckByIdQuery } from "../../features/cardDecks/cardDeck-api
 import { Link, useParams } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import Card from "../../components/Card/Card";
 
 const Decks: React.FC = () => {
   const { id } = useParams();
@@ -23,12 +24,14 @@ const Decks: React.FC = () => {
               <h2>{data?.description}</h2>
               <div className="flex">
                 {data?.cards.map((card) => (
-                  <span key={card.id}>
-                    <div className="deck">
-                      <div className="title">{card.front}</div>
-                      <div className="desc">{card.back}</div>
-                    </div>
-                  </span>
+                  <Card>
+                    <span key={card.id}>
+                      <div className="deck">
+                        <div className="title">{card.front}</div>
+                        <div className="desc">{card.back}</div>
+                      </div>
+                    </span>
+                  </Card>
                 ))}
                 <Link to="new">
                   <div className="centered">

assets/src/pages/Deck/styled.tsx

@@ -3,6 +3,7 @@ import styled from "styled-components";
 export const DecksOuterWrapper = styled.div`
   height: 100%;
   width: 100%;
+  flex-grow: 1;
   padding-top: calc(var(--toolbar-height));
 `;
 

assets/src/pages/Decks/Decks.tsx

@@ -8,6 +8,7 @@ import { Link } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { useAppSelector } from "../../app/hooks";
+import Card from "../../components/Card/Card";
 
 const Decks: React.FC = () => {
   const username = useAppSelector((state) => state.auth.user?.username);
@@ -21,13 +22,15 @@ const Decks: React.FC = () => {
         ) : (
           <DecksInnerWrapper>
             {data.map((cardDeck) => (
-              <Link key={cardDeck.id} to={`${cardDeck.id}`}>
-                <div className="deck">
-                  <div className="title">{cardDeck.title}</div>
-                  <div className="desc">{cardDeck.description}</div>
-                  <div className="count">Karten: {cardDeck.cards.length}</div>
-                </div>
-              </Link>
+              <Card>
+                <Link key={cardDeck.id} to={`${cardDeck.id}`}>
+                  <div className="deck">
+                    <div className="title">{cardDeck.title}</div>
+                    <div className="desc">{cardDeck.description}</div>
+                    <div className="count">Karten: {cardDeck.cards.length}</div>
+                  </div>
+                </Link>
+              </Card>
             ))}
             <Link to="new">
               <div className="centered">

assets/src/styled.d.ts

@@ -0,0 +1,6 @@
+import "styled-components";
+
+import {Theme} from "./features/theme/theme-slice";
+declare module 'styled-components' {
+    export interface DefaultTheme extends Theme {}
+}

assets/src/styles/Variables.ts

@@ -15,4 +15,4 @@ const Variables = css`
 }
 `;
 
-export default Variables;
+export default Variables;