15 files changed, 213 insertions, 126 deletions
diff --git a/FrontEnd/src/views/common/AppBar.css b/FrontEnd/src/views/common/AppBar.css
new file mode 100644
index 00000000..c6f4e184
--- /dev/null
+++ b/FrontEnd/src/views/common/AppBar.css
@@ -0,0 +1,90 @@
+.app-bar {
+  display: flex;
+  align-items: center;
+  height: 56px;
+  position: fixed;
+  z-index: 1030;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--tl-primary-color);
+  transition: background-color 1s;
+}
+.app-bar a {
+  color: var(--tl-text-on-primary-r1-color);
+  text-decoration: none;
+  margin: 0 1em;
+  transition: color 1s;
+}
+.app-bar a:hover {
+  color: var(--tl-text-on-primary-color);
+}
+.app-bar a.active {
+  color: var(--tl-text-on-primary-color);
+}
+
+.app-bar-brand {
+  display: flex;
+  align-items: center;
+}
+
+.app-bar-brand-icon {
+  height: 2em;
+}
+
+.app-bar-main-area {
+  display: flex;
+  flex-grow: 1;
+}
+
+.app-bar-link-area {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.app-bar-user-area {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.small-screen .app-bar-main-area {
+  position: absolute;
+  top: 56px;
+  left: 0;
+  right: 0;
+  transform-origin: top;
+  transition: transform 0.6s, background-color 1s;
+  background-color: var(--tl-primary-color);
+  flex-direction: column;
+}
+.small-screen .app-bar-main-area.app-bar-collapse {
+  transform: scale(1, 0);
+}
+.small-screen .app-bar-main-area a {
+  text-align: left;
+  padding: 0.5em 0.5em;
+}
+.small-screen .app-bar-link-area {
+  flex-direction: column;
+  align-items: stretch;
+}
+.small-screen .app-bar-user-area {
+  flex-direction: column;
+  align-items: stretch;
+  margin-left: unset;
+}
+.small-screen .app-bar-avatar {
+  align-self: flex-end;
+}
+
+.app-bar-toggler {
+  margin-left: auto;
+  font-size: 2em;
+  margin-right: 1em;
+  color: var(--tl-text-on-primary-color);
+  cursor: pointer;
+  user-select: none;
+}
diff --git a/FrontEnd/src/views/common/AppBar.tsx b/FrontEnd/src/views/common/AppBar.tsx
index ebc8bf0c..7ec0a5eb 100644
--- a/FrontEnd/src/views/common/AppBar.tsx
+++ b/FrontEnd/src/views/common/AppBar.tsx
@@ -9,7 +9,7 @@ import { useUser } from "@/services/user";
 import TimelineLogo from "./TimelineLogo";
 import UserAvatar from "./user/UserAvatar";
 
-import "./index.css";
+import "./AppBar.css";
 
 const AppBar: React.FC = (_) => {
   const { t } = useTranslation();
diff --git a/FrontEnd/src/views/common/LoadingPage.tsx b/FrontEnd/src/views/common/LoadingPage.tsx
index 590fafa0..8c1e681a 100644
--- a/FrontEnd/src/views/common/LoadingPage.tsx
+++ b/FrontEnd/src/views/common/LoadingPage.tsx
@@ -1,10 +1,11 @@
 import React from "react";
-import { Spinner } from "react-bootstrap";
+
+import Spinner from "./Spinner";
 
 const LoadingPage: React.FC = () => {
   return (
     <div className="position-fixed w-100 h-100 d-flex justify-content-center align-items-center">
-      <Spinner variant="primary" animation="border" />
+      <Spinner />
     </div>
   );
 };
diff --git a/FrontEnd/src/views/common/SearchInput.css b/FrontEnd/src/views/common/SearchInput.css
new file mode 100644
index 00000000..2943b3a2
--- /dev/null
+++ b/FrontEnd/src/views/common/SearchInput.css
@@ -0,0 +1,4 @@
+.cru-search-input {
+  display: flex;
+  flex-wrap: wrap;
+}
diff --git a/FrontEnd/src/views/common/SearchInput.tsx b/FrontEnd/src/views/common/SearchInput.tsx
index fff11b95..da3f1c19 100644
--- a/FrontEnd/src/views/common/SearchInput.tsx
+++ b/FrontEnd/src/views/common/SearchInput.tsx
@@ -4,6 +4,8 @@ import { useTranslation } from "react-i18next";
 
 import LoadingButton from "./button/LoadingButton";
 
+import "./SearchInput.css";
+
 export interface SearchInputProps {
   value: string;
   onChange: (value: string) => void;
diff --git a/FrontEnd/src/views/common/alert/alert.css b/FrontEnd/src/views/common/alert/alert.css
new file mode 100644
index 00000000..12ce294e
--- /dev/null
+++ b/FrontEnd/src/views/common/alert/alert.css
@@ -0,0 +1,4 @@
+.alert-container {
+  position: fixed;
+  z-index: 1040;
+}
diff --git a/FrontEnd/src/views/common/alert/alert.sass b/FrontEnd/src/views/common/alert/alert.sass
deleted file mode 100644
index c3560b87..00000000
--- a/FrontEnd/src/views/common/alert/alert.sass
+++ /dev/null
@@ -1,15 +0,0 @@
-.alert-container
-  position: fixed
-  z-index: $zindex-popover
-
-@include media-breakpoint-up(sm)
-  .alert-container
-    bottom: 0
-    right: 0
-
-@include media-breakpoint-down(sm)
-  .alert-container
-    bottom: 0
-    right: 0
-    left: 0
-    text-align: center
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index e69de29b..b6df222f 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -0,0 +1,72 @@
+.cru-button {
+  color: white;
+  cursor: pointer;
+  padding: 0.2em 0.5em;
+  border-radius: 0.2em;
+  border: none;
+  transition: all 0.6s;
+}
+
+.cru-button.primary {
+  background-color: var(--tl-primary-color);
+}
+
+.cru-button.primary:hover {
+  background-color: var(--tl-primary-f1-color);
+}
+
+.cru-button.primary:active {
+  background-color: var(--tl-primary-f2-color);
+}
+
+.cru-button.primary.disabled {
+  background-color: var(--tl-primary-f3-color);
+}
+
+.cru-button.secondary {
+  background-color: var(--tl-secondary-color);
+}
+
+.cru-button.secondary:hover {
+  background-color: var(--tl-secondary-f1-color);
+}
+
+.cru-button.secondary:active {
+  background-color: var(--tl-secondary-f2-color);
+}
+
+.cru-button.secondary.disabled {
+  background-color: var(--tl-secondary-f3-color);
+}
+
+.cru-button.success {
+  background-color: var(--tl-success-color);
+}
+
+.cru-button.success:hover {
+  background-color: var(--tl-success-f1-color);
+}
+
+.cru-button.success:active {
+  background-color: var(--tl-success-f2-color);
+}
+
+.cru-button.success.disabled {
+  background-color: var(--tl-success-f3-color);
+}
+
+.cru-button.danger {
+  background-color: var(--tl-danger-color);
+}
+
+.cru-button.danger:hover {
+  background-color: var(--tl-danger-f1-color);
+}
+
+.cru-button.danger:active {
+  background-color: var(--tl-danger-f2-color);
+}
+
+.cru-button.danger.disabled {
+  background-color: var(--tl-danger-f3-color);
+}
diff --git a/FrontEnd/src/views/common/button/Button.tsx b/FrontEnd/src/views/common/button/Button.tsx
index 11710647..a39ef8a7 100644
--- a/FrontEnd/src/views/common/button/Button.tsx
+++ b/FrontEnd/src/views/common/button/Button.tsx
@@ -6,16 +6,19 @@ import { calculateProps, CommonButtonProps } from "./common";
 import "./Button.css";
 
 function _Button(
-  props: CommonButtonProps & { customButtonClassName?: string },
+  props: CommonButtonProps & {
+    outline?: boolean;
+    customButtonClassName?: string;
+  },
   ref: React.ForwardedRef<HTMLButtonElement>
 ): React.ReactElement | null {
   const { t } = useTranslation();
 
-  const { customButtonClassName, ...otherProps } = props;
+  const { customButtonClassName, outline, ...otherProps } = props;
 
   const { newProps, children } = calculateProps(
     otherProps,
-    customButtonClassName ?? "cru-button",
+    customButtonClassName ?? "cru-button" + (outline ? " outline" : ""),
     t
   );
 
diff --git a/FrontEnd/src/views/common/button/FlatButton.css b/FrontEnd/src/views/common/button/FlatButton.css
index 522563b9..c3c0dbb3 100644
--- a/FrontEnd/src/views/common/button/FlatButton.css
+++ b/FrontEnd/src/views/common/button/FlatButton.css
@@ -20,7 +20,7 @@
 }
 
 .cru-flat-button.primary.disabled {
-  color: var(--tl-primary-lighter-color);
+  color: var(--tl-primary-l1-color);
 }
 
 .cru-flat-button.secondary {
@@ -28,7 +28,7 @@
 }
 
 .cru-flat-button.secondary.disabled {
-  color: var(--tl-secondary-lighter-color);
+  color: var(--tl-secondary-l1-color);
 }
 
 .cru-flat-button.success {
@@ -36,7 +36,7 @@
 }
 
 .cru-flat-button.success.disabled {
-  color: var(--tl-success-lighter-color);
+  color: var(--tl-success-l1-color);
 }
 
 .cru-flat-button.danger {
@@ -44,5 +44,5 @@
 }
 
 .cru-flat-button.danger.disabled {
-  color: var(--tl-danger-ligher-color);
+  color: var(--tl-danger-l1-color);
 }
diff --git a/FrontEnd/src/views/common/button/TextButton.css b/FrontEnd/src/views/common/button/TextButton.css
index dc5abaaa..d267fb38 100644
--- a/FrontEnd/src/views/common/button/TextButton.css
+++ b/FrontEnd/src/views/common/button/TextButton.css
@@ -8,7 +8,7 @@
 }
 
 .cru-text-button.primary:hover {
-  color: var(--tl-primary-lighter-color);
+  color: var(--tl-primary-l1-color);
 }
 
 .cru-text-button.secondary {
@@ -16,7 +16,7 @@
 }
 
 .cru-text-button.secondary:hover {
-  color: var(--tl-secondary-lighter-color);
+  color: var(--tl-secondary-l1-color);
 }
 
 .cru-text-button.success {
@@ -24,7 +24,7 @@
 }
 
 .cru-text-button.success:hover {
-  color: var(--tl-success-lighter-color);
+  color: var(--tl-success-l1-color);
 }
 
 .cru-text-button.danger {
@@ -32,5 +32,5 @@
 }
 
 .cru-text-button.danger:hover {
-  color: var(--tl-danger-lighter-color);
+  color: var(--tl-danger-l1-color);
 }
diff --git a/FrontEnd/src/views/common/FullPage.tsx b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
index 1b59045a..88c90bbc 100644
--- a/FrontEnd/src/views/common/FullPage.tsx
+++ b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 import classnames from "classnames";
 
-export interface FullPageProps {
+export interface FullPageDialogProps {
   show: boolean;
   onBack: () => void;
   contentContainerClassName?: string;
 }
 
-const FullPage: React.FC<FullPageProps> = ({
+const FullPageDialog: React.FC<FullPageDialogProps> = ({
   show,
   onBack,
   children,
@@ -36,4 +36,4 @@ const FullPage: React.FC<FullPageProps> = ({
   );
 };
 
-export default FullPage;
+export default FullPageDialog;
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index bfd82b58..f580c781 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -37,96 +37,6 @@
   touch-action: none;
 }
 
-.app-bar {
-  display: flex;
-  align-items: center;
-  height: 56px;
-  position: fixed;
-  z-index: 1030;
-  top: 0;
-  left: 0;
-  right: 0;
-  background-color: var(--tl-primary-color);
-  transition: background-color 1s;
-}
-.app-bar a {
-  color: var(--tl-text-on-primary-inactive-color);
-  text-decoration: none;
-  margin: 0 1em;
-}
-.app-bar a:hover {
-  color: var(--tl-text-on-primary-color);
-}
-.app-bar a.active {
-  color: var(--tl-text-on-primary-color);
-}
-
-.app-bar-brand {
-  display: flex;
-  align-items: center;
-}
-
-.app-bar-brand-icon {
-  height: 2em;
-}
-
-.app-bar-main-area {
-  display: flex;
-  flex-grow: 1;
-}
-
-.app-bar-link-area {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.app-bar-user-area {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  margin-left: auto;
-}
-
-.small-screen .app-bar-main-area {
-  position: absolute;
-  top: 56px;
-  left: 0;
-  right: 0;
-  transform-origin: top;
-  transition: transform 0.6s, background-color 1s;
-  background-color: var(--tl-primary-color);
-  flex-direction: column;
-}
-.small-screen .app-bar-main-area.app-bar-collapse {
-  transform: scale(1, 0);
-}
-.small-screen .app-bar-main-area a {
-  text-align: left;
-  padding: 0.5em 0.5em;
-}
-.small-screen .app-bar-link-area {
-  flex-direction: column;
-  align-items: stretch;
-}
-.small-screen .app-bar-user-area {
-  flex-direction: column;
-  align-items: stretch;
-  margin-left: unset;
-}
-.small-screen .app-bar-avatar {
-  align-self: flex-end;
-}
-
-.app-bar-toggler {
-  margin-left: auto;
-  font-size: 2em;
-  margin-right: 1em;
-  color: var(--tl-text-on-primary-color);
-  cursor: pointer;
-  user-select: none;
-}
-
 .cru-skeleton {
   padding: 0 1em;
 }
@@ -247,10 +157,7 @@
   align-items: center;
 }
 
-.cru-search-input {
-  display: flex;
-  flex-wrap: wrap;
-}
+
 
 .alert-container {
   position: fixed;
diff --git a/FrontEnd/src/views/common/TabPages.tsx b/FrontEnd/src/views/common/tab/TabPages.tsx
index b7a9fb36..b7a9fb36 100644
--- a/FrontEnd/src/views/common/TabPages.tsx
+++ b/FrontEnd/src/views/common/tab/TabPages.tsx
diff --git a/FrontEnd/src/views/common/tab/Tabs.tsx b/FrontEnd/src/views/common/tab/Tabs.tsx
new file mode 100644
index 00000000..29ebcbd8
--- /dev/null
+++ b/FrontEnd/src/views/common/tab/Tabs.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import { I18nText } from "@/common";
+
+export interface Tab {
+  name: string;
+  text: I18nText;
+  link?: string;
+  onClick?: () => void;
+}
+
+export interface TabsProps {
+  activeTabName?: string;
+  tabs: Tab[];
+}
+
+export default function Tabs(props: TabsProps): React.ReactElement | null {
+  return <div></div>;
+}