remove unnecessary files and rename custom button

code/frontend/src/Hashtags.tsx

@@ -1,210 +0,0 @@
-import * as React from "react";
-import Chip from "@mui/material/Chip";
-import Autocomplete from "@mui/material/Autocomplete";
-import TextField from "@mui/material/TextField";
-import Stack from "@mui/material/Stack";
-
-export default function Tags() {
-  return (
-    <Stack spacing={3} sx={{ width: 500 }}>
-      <Autocomplete
-        multiple
-        id="tags-standard"
-        options={top100Films}
-        getOptionLabel={(option) => option.title}
-        defaultValue={[top100Films[13]]}
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            variant="standard"
-            label="Multiple values"
-            placeholder="Favorites"
-          />
-        )}
-      />
-      <Autocomplete
-        multiple
-        id="tags-outlined"
-        options={top100Films}
-        getOptionLabel={(option) => option.title}
-        defaultValue={[top100Films[13]]}
-        filterSelectedOptions
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            onChange={(event) => {}}
-            label="filterSelectedOptions"
-            placeholder="Favorites"
-          />
-        )}
-      />
-      <Autocomplete
-        multiple
-        id="tags-filled"
-        options={top100Films.map((option) => option.title)}
-        defaultValue={[top100Films[13].title]}
-        freeSolo
-        renderValue={(value: readonly string[], getItemProps) =>
-          value.map((option: string, index: number) => {
-            const { key, ...itemProps } = getItemProps({ index });
-            return (
-              <Chip
-                variant="outlined"
-                label={option}
-                key={key}
-                {...itemProps}
-              />
-            );
-          })
-        }
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            variant="filled"
-            label="freeSolo"
-            placeholder="Favorites"
-          />
-        )}
-      />
-      <Autocomplete
-        multiple
-        id="tags-readOnly"
-        options={top100Films.map((option) => option.title)}
-        defaultValue={[top100Films[12].title, top100Films[13].title]}
-        readOnly
-        renderInput={(params) => (
-          <TextField {...params} label="readOnly" placeholder="Favorites" />
-        )}
-      />
-    </Stack>
-  );
-}
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
-  { title: "The Shawshank Redemption", year: 1994 },
-  { title: "The Godfather", year: 1972 },
-  { title: "The Godfather: Part II", year: 1974 },
-  { title: "The Dark Knight", year: 2008 },
-  { title: "12 Angry Men", year: 1957 },
-  { title: "Schindler's List", year: 1993 },
-  { title: "Pulp Fiction", year: 1994 },
-  {
-    title: "The Lord of the Rings: The Return of the King",
-    year: 2003,
-  },
-  { title: "The Good, the Bad and the Ugly", year: 1966 },
-  { title: "Fight Club", year: 1999 },
-  {
-    title: "The Lord of the Rings: The Fellowship of the Ring",
-    year: 2001,
-  },
-  {
-    title: "Star Wars: Episode V - The Empire Strikes Back",
-    year: 1980,
-  },
-  { title: "Forrest Gump", year: 1994 },
-  { title: "Inception", year: 2010 },
-  {
-    title: "The Lord of the Rings: The Two Towers",
-    year: 2002,
-  },
-  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { title: "Goodfellas", year: 1990 },
-  { title: "The Matrix", year: 1999 },
-  { title: "Seven Samurai", year: 1954 },
-  {
-    title: "Star Wars: Episode IV - A New Hope",
-    year: 1977,
-  },
-  { title: "City of God", year: 2002 },
-  { title: "Se7en", year: 1995 },
-  { title: "The Silence of the Lambs", year: 1991 },
-  { title: "It's a Wonderful Life", year: 1946 },
-  { title: "Life Is Beautiful", year: 1997 },
-  { title: "The Usual Suspects", year: 1995 },
-  { title: "Léon: The Professional", year: 1994 },
-  { title: "Spirited Away", year: 2001 },
-  { title: "Saving Private Ryan", year: 1998 },
-  { title: "Once Upon a Time in the West", year: 1968 },
-  { title: "American History X", year: 1998 },
-  { title: "Interstellar", year: 2014 },
-  { title: "Casablanca", year: 1942 },
-  { title: "City Lights", year: 1931 },
-  { title: "Psycho", year: 1960 },
-  { title: "The Green Mile", year: 1999 },
-  { title: "The Intouchables", year: 2011 },
-  { title: "Modern Times", year: 1936 },
-  { title: "Raiders of the Lost Ark", year: 1981 },
-  { title: "Rear Window", year: 1954 },
-  { title: "The Pianist", year: 2002 },
-  { title: "The Departed", year: 2006 },
-  { title: "Terminator 2: Judgment Day", year: 1991 },
-  { title: "Back to the Future", year: 1985 },
-  { title: "Whiplash", year: 2014 },
-  { title: "Gladiator", year: 2000 },
-  { title: "Memento", year: 2000 },
-  { title: "The Prestige", year: 2006 },
-  { title: "The Lion King", year: 1994 },
-  { title: "Apocalypse Now", year: 1979 },
-  { title: "Alien", year: 1979 },
-  { title: "Sunset Boulevard", year: 1950 },
-  {
-    title:
-      "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",
-    year: 1964,
-  },
-  { title: "The Great Dictator", year: 1940 },
-  { title: "Cinema Paradiso", year: 1988 },
-  { title: "The Lives of Others", year: 2006 },
-  { title: "Grave of the Fireflies", year: 1988 },
-  { title: "Paths of Glory", year: 1957 },
-  { title: "Django Unchained", year: 2012 },
-  { title: "The Shining", year: 1980 },
-  { title: "WALL·E", year: 2008 },
-  { title: "American Beauty", year: 1999 },
-  { title: "The Dark Knight Rises", year: 2012 },
-  { title: "Princess Mononoke", year: 1997 },
-  { title: "Aliens", year: 1986 },
-  { title: "Oldboy", year: 2003 },
-  { title: "Once Upon a Time in America", year: 1984 },
-  { title: "Witness for the Prosecution", year: 1957 },
-  { title: "Das Boot", year: 1981 },
-  { title: "Citizen Kane", year: 1941 },
-  { title: "North by Northwest", year: 1959 },
-  { title: "Vertigo", year: 1958 },
-  {
-    title: "Star Wars: Episode VI - Return of the Jedi",
-    year: 1983,
-  },
-  { title: "Reservoir Dogs", year: 1992 },
-  { title: "Braveheart", year: 1995 },
-  { title: "M", year: 1931 },
-  { title: "Requiem for a Dream", year: 2000 },
-  { title: "Amélie", year: 2001 },
-  { title: "A Clockwork Orange", year: 1971 },
-  { title: "Like Stars on Earth", year: 2007 },
-  { title: "Taxi Driver", year: 1976 },
-  { title: "Lawrence of Arabia", year: 1962 },
-  { title: "Double Indemnity", year: 1944 },
-  {
-    title: "Eternal Sunshine of the Spotless Mind",
-    year: 2004,
-  },
-  { title: "Amadeus", year: 1984 },
-  { title: "To Kill a Mockingbird", year: 1962 },
-  { title: "Toy Story 3", year: 2010 },
-  { title: "Logan", year: 2017 },
-  { title: "Full Metal Jacket", year: 1987 },
-  { title: "Dangal", year: 2016 },
-  { title: "The Sting", year: 1973 },
-  { title: "2001: A Space Odyssey", year: 1968 },
-  { title: "Singin' in the Rain", year: 1952 },
-  { title: "Toy Story", year: 1995 },
-  { title: "Bicycle Thieves", year: 1948 },
-  { title: "The Kid", year: 1921 },
-  { title: "Inglourious Basterds", year: 2009 },
-  { title: "Snatch", year: 2000 },
-  { title: "3 Idiots", year: 2009 },
-  { title: "Monty Python and the Holy Grail", year: 1975 },
-];

code/frontend/src/components/Bio.tsx

@@ -7,7 +7,7 @@ import "./bio.css";
 import "../styles/colors.css";
 import IconButton from "@mui/material/IconButton";
 import EditSquareIcon from "@mui/icons-material/EditSquare";
-import ButtonPrimary from "./ButtonPrimary";
+import ButtonPrimary from "./ButtonRotkehlchen";
 
 export default function MultilineTextFields() {
   const toggleEditMode = () => {
@@ -40,7 +40,7 @@ export default function MultilineTextFields() {
             />
           </IconButton>
         </div>
-        {editMode && <ButtonPrimary value={"Ok"} onClick={toggleEditMode} />}
+        {editMode && <ButtonPrimary style="primary" label={"Ok"} onClick={toggleEditMode} />}
       </Box>
     </StyledEngineProvider>
   );

code/frontend/src/components/ButtonPrimary.tsx

@@ -1,18 +0,0 @@
-import "./buttonPrimary.css";
-
-interface ButtonPrimaryProps {
-  value: string;
-  onClick?: () => void;
-}
-
-export default function ButtonPrimary({ value, onClick }: ButtonPrimaryProps) {
-  return (
-    <button
-      type="submit"
-      className="login-button body-m"
-      onClick={onClick}
-    >
-      {value}
-    </button>
-  );
-}

code/frontend/src/components/ButtonRotkehlchen.tsx

@@ -0,0 +1,32 @@
+import "./buttonRotkehlchen.css";
+
+interface ButtonPrimaryProps {
+  style: "primary" | "secondary";
+  label: string;
+  onClick?: () => void;
+}
+
+export default function ButtonPrimary({ style, label, onClick }: ButtonPrimaryProps) {
+  return (
+    <>
+      {style === "primary" && (
+        <button
+          type="submit"
+          className="button-primary body-m"
+          onClick={onClick}
+        >
+          {label}
+        </button>
+      )}
+      {style === "secondary" && (
+        <button
+          type="button"
+          className="button-secondary body-m"
+          onClick={onClick}
+        >
+          {label}
+        </button>
+      )}
+    </>
+  );
+}

code/frontend/src/components/ChangeAvatarDialog.tsx

@@ -16,7 +16,7 @@ import EditSquareIcon from "@mui/icons-material/EditSquare";
 import "../styles/colors.css";
 import "../styles/fonts.css";
 import "./changeAvatarDialog.css";
-import ButtonPrimary from "./ButtonPrimary";
+import ButtonRotkehlchen from "./ButtonRotkehlchen";
 import { useFilePicker } from "use-file-picker";
 
 const BootstrapDialog = styled(Dialog)(({ theme }) => ({
@@ -136,7 +136,8 @@ export default function CustomizedDialogs() {
         </DialogContent>
         <Divider variant="middle" className="divider" />
         <DialogActions>
-          <ButtonPrimary value="Save Changes" onClick={handleSaveChanges} />
+          <ButtonRotkehlchen style="primary" label="Save Changes" onClick={handleSaveChanges} />
+          <ButtonRotkehlchen style="secondary" label="Cancel" onClick={handleClose} />
         </DialogActions>
       </BootstrapDialog>
     </React.Fragment>

code/frontend/src/components/buttonPrimary.css

@@ -1,26 +0,0 @@
-.login-button {
-    display: inline-flex;
-    padding: auto;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    width: fit-content;
-
-    margin: 1rem;
-    border-radius: 10px;
-    border: 2px solid var(--Rotkehlchen-orange-default);
-    background: var(--Rotkehlchen-yellow-default);
-  }
-  
-  .login-button:hover {
-    border-radius: 10px;
-    border: 2px solid var(--Rotkehlchen-orange-default);
-    background: var(--Rotkehlchen-yellow-hover);
-  }
-  .login-button:active {
-    border-radius: 10px;
-    border: 2px solid var(--Rotkehlchen-orange-default);
-    background: var(--Rotkehlchen-orange-default);
-  }

code/frontend/src/components/buttonRotkehlchen.css

@@ -0,0 +1,55 @@
+.button-primary {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    width: fit-content;
+
+    margin: 1rem;
+    border-radius: 10px;
+    border: 2px solid var(--Rotkehlchen-orange-default);
+    background: var(--Rotkehlchen-yellow-default);
+  }
+  
+  .button-primary:hover {
+    border-radius: 10px;
+    border: 2px solid var(--Rotkehlchen-orange-default);
+    background: var(--Rotkehlchen-yellow-hover);
+  }
+  .button-primary:active {
+    border-radius: 10px;
+    border: 2px solid var(--Rotkehlchen-orange-default);
+    background: var(--Rotkehlchen-orange-default);
+  }
+
+  .button-secondary {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    width: fit-content;
+
+    margin: 1rem;
+    border-radius: 10px;
+    border: 2px solid var(--Rotkehlchen-yellow-default);
+    background: var(--Rotkehlchen-gray);
+  }
+  
+  .button-secondary:hover {
+    border-radius: 10px;
+    border: 2px solid var(--Rotkehlchen-yellow-default);
+    background: var(--Rotkehlchen-gray-hover);
+  }
+  .button-secondary:active {
+    border-radius: 10px;
+    border: 2px solid var(--Rotkehlchen-yellow-default);
+    background: var(--Rotkehlchen-yellow-default);
+  }

code/frontend/src/pages/LoginAndSignUpPage.tsx

@@ -1,8 +1,7 @@
 import "./loginAndSignUpPage.css";
 import { useEffect, useState } from "react";
 import axios from "axios";
-import { Button } from "@mui/material";
-import ButtonPrimary from "../components/ButtonPrimary";
+import ButtonPrimary from "../components/ButtonRotkehlchen";
 
 type FormData = {
   username: string;
@@ -136,7 +135,7 @@ function LoginAndSignUpPage({ signupProp }: { signupProp: boolean }) {
               </div>
             )}
           </div>
-          <ButtonPrimary value={signup ? "Sign Up" : "Login"} />
+          <ButtonPrimary style="primary" label={signup ? "Sign Up" : "Login"} />
           <div className="login-signup body-m" onClick={toggleLogin}>
             {signup
               ? "Already have an account? "

code/frontend/src/styles/colors.css

@@ -1,5 +1,6 @@
 :root {
   --Rotkehlchen-gray: #e7ecf2;
+  --Rotkehlchen-gray-hover: #D5D7DA;;
   --Rotkehlchen-brown-light: #a28d7a;
   --Rotkehlchen-brown-middle: #7f6d6d;
   --Rotkehlchen-brown-dark: #4c4141;