...

6 files changed, 356 insertions, 227 deletions

diff --git a/FrontEnd/src/views/common/AppBar.tsx b/FrontEnd/src/views/common/AppBar.tsx
index 91dfbee9..ebc8bf0c 100644
--- a/FrontEnd/src/views/common/AppBar.tsx
+++ b/FrontEnd/src/views/common/AppBar.tsx
@@ -9,6 +9,8 @@ import { useUser } from "@/services/user";
 import TimelineLogo from "./TimelineLogo";
 import UserAvatar from "./user/UserAvatar";
 
+import "./index.css";
+
 const AppBar: React.FC = (_) => {
   const { t } = useTranslation();
 
diff --git a/FrontEnd/src/views/common/FlatButton.tsx b/FrontEnd/src/views/common/FlatButton.tsx
deleted file mode 100644
index b1f7a051..00000000
--- a/FrontEnd/src/views/common/FlatButton.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-
-import { BootstrapThemeColor } from "@/common";
-
-export interface FlatButtonProps {
-  variant?: BootstrapThemeColor | string;
-  disabled?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-  onClick?: () => void;
-}
-
-const FlatButton: React.FC<FlatButtonProps> = (props) => {
-  const { disabled, className, style } = props;
-  const variant = props.variant ?? "primary";
-
-  const onClick = disabled ? undefined : props.onClick;
-
-  return (
-    <div
-      className={classnames(
-        "flat-button",
-        variant,
-        disabled ? "disabled" : null,
-        className
-      )}
-      style={style}
-      onClick={onClick}
-    >
-      {props.children}
-    </div>
-  );
-};
-
-export default FlatButton;
diff --git a/FrontEnd/src/views/common/button/FlatButton.css b/FrontEnd/src/views/common/button/FlatButton.css
new file mode 100644
index 00000000..779e3562
--- /dev/null
+++ b/FrontEnd/src/views/common/button/FlatButton.css
@@ -0,0 +1,45 @@
+.cru-flat-button {

+  cursor: pointer;

+  padding: 0.2em 0.5em;

+  border-radius: 0.2em;

+}

+

+.cru-flat-button:hover:not(.disabled) {

+  background-color: #e9ecef;

+}

+

+.cru-flat-button.disabled {

+  cursor: default;

+}

+

+.cru-flat-button.primary {

+  color: var(--tl-primary-color);

+}

+

+.cru-flat-button.primary.disabled {

+  color: var(--tl-primary-lighter-color);

+}

+

+.cru-flat-button.secondary {

+  color: var(--tl-secondary-color);

+}

+

+.cru-flat-button.secondary.disabled {

+  color: var(--tl-secondary-lighter-color);

+}

+

+.cru-flat-button.success {

+  color: var(--tl-success-color);

+}

+

+.cru-flat-button.success.disabled {

+  color: var(--tl-success-lighter-color);

+}

+

+.cru-flat-button.danger {

+  color: var(--tl-danger-color);

+}

+

+.cru-flat-button.danger.disabled {

+  color: var(--tl-danger-ligher-color);

+}

diff --git a/FrontEnd/src/views/common/button/FlatButton.tsx b/FrontEnd/src/views/common/button/FlatButton.tsx
new file mode 100644
index 00000000..0727eb88
--- /dev/null
+++ b/FrontEnd/src/views/common/button/FlatButton.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import { convertI18nText, I18nText } from "@/common";
+import { PaletteColorType } from "@/palette";
+
+import "./FlatButton.css";
+import classNames from "classnames";
+
+function _FlatButton(
+  {
+    text,
+    color,
+    onClick,
+  }: {
+    text: I18nText;
+    color?: PaletteColorType;
+    onClick?: () => void;
+  },
+  ref: React.ForwardedRef<HTMLButtonElement>
+): React.ReactElement | null {
+  const { t } = useTranslation();
+
+  return (
+    <button
+      ref={ref}
+      className={classNames("cru-flat-button", color ?? "primary")}
+      onClick={onClick}
+    >
+      {convertI18nText(text, t)}
+    </button>
+  );
+}
+
+const FlatButton = React.forwardRef(_FlatButton);
+export default FlatButton;
diff --git a/FrontEnd/src/views/common/common.sass b/FrontEnd/src/views/common/common.sass
deleted file mode 100644
index cbf7292e..00000000
--- a/FrontEnd/src/views/common/common.sass
+++ /dev/null
@@ -1,191 +0,0 @@
-.image-cropper-container

-  position: relative

-  box-sizing: border-box

-  user-select: none

-

-.image-cropper-container img

-  position: absolute

-  left: 0

-  top: 0

-  width: 100%

-  height: 100%

-

-.image-cropper-mask-container

-  position: absolute

-  left: 0

-  top: 0

-  right: 0

-  bottom: 0

-  overflow: hidden

-

-.image-cropper-mask

-  position: absolute

-  box-shadow: 0 0 0 10000px rgba(255, 255, 255, 80%)

-  touch-action: none

-

-.image-cropper-handler

-  position: absolute

-  width: 26px

-  height: 26px

-  border: black solid 2px

-  border-radius: 50%

-  background: white

-  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

-

-  a

-    color: var(--tl-text-on-primary-inactive-color)

-    text-decoration: none

-    margin: 0 1em

-

-    &:hover

-      color: var(--tl-text-on-primary-color)

-

-    &.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

-

-    &.app-bar-collapse

-      transform: scale(1,0)

-

-    a

-      text-align: left

-      padding: 0.5em 0.5em

-

-  .app-bar-link-area

-    flex-direction: column

-    align-items: stretch

-

-  .app-bar-user-area

-    flex-direction: column

-    align-items: stretch

-    margin-left: unset

-

-  .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

-

-.cru-skeleton-line

-  height: 1em

-  background-color: #e6e6e6

-  margin: 0.7em 0

-  border-radius: 0.2em

-

-  &.last

-    width: 50%

-

-.cru-full-page

-  position: fixed

-  z-index: 1031

-  left: 0

-  top: 0

-  right: 0

-  bottom: 0

-  background-color: white

-  padding-top: 56px

-

-.cru-full-page-top-bar

-  height: 56px

-

-  position: absolute

-  top: 0

-  left: 0

-  right: 0

-  z-index: 1

-

-  background-color: var(--tl-primary-color)

-

-  display: flex

-  align-items: center

-

-.cru-full-page-content-container

-  overflow: scroll

-

-.cru-menu

-  min-width: 200px

-

-.cru-menu-item

-  font-size: 1.2em

-  padding: 0.5em 1.5em

-  cursor: pointer

-

-  @each $color, $value in $theme-colors

-    &.color-#{$color}

-      color: $value

-

-      &:hover

-        color: white

-        background-color: $value

-

-.cru-menu-item-icon

-  margin-right: 1em

-

-.cru-menu-divider

-  border-top: 1px solid $gray-200

-

-.cru-tab-pages-action-area

-  display: flex

-  align-items: center

-

-.cru-search-input

-  display: flex

-  flex-wrap: wrap

diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
new file mode 100644
index 00000000..bfd82b58
--- /dev/null
+++ b/FrontEnd/src/views/common/index.css
@@ -0,0 +1,273 @@
+.image-cropper-container {

+  position: relative;

+  box-sizing: border-box;

+  user-select: none;

+}

+

+.image-cropper-container img {

+  position: absolute;

+  left: 0;

+  top: 0;

+  width: 100%;

+  height: 100%;

+}

+

+.image-cropper-mask-container {

+  position: absolute;

+  left: 0;

+  top: 0;

+  right: 0;

+  bottom: 0;

+  overflow: hidden;

+}

+

+.image-cropper-mask {

+  position: absolute;

+  box-shadow: 0 0 0 10000px rgba(255, 255, 255, 0.8);

+  touch-action: none;

+}

+

+.image-cropper-handler {

+  position: absolute;

+  width: 26px;

+  height: 26px;

+  border: black solid 2px;

+  border-radius: 50%;

+  background: white;

+  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;

+}

+

+.cru-skeleton-line {

+  height: 1em;

+  background-color: #e6e6e6;

+  margin: 0.7em 0;

+  border-radius: 0.2em;

+}

+.cru-skeleton-line.last {

+  width: 50%;

+}

+

+.cru-full-page {

+  position: fixed;

+  z-index: 1031;

+  left: 0;

+  top: 0;

+  right: 0;

+  bottom: 0;

+  background-color: white;

+  padding-top: 56px;

+}

+

+.cru-full-page-top-bar {

+  height: 56px;

+  position: absolute;

+  top: 0;

+  left: 0;

+  right: 0;

+  z-index: 1;

+  background-color: var(--tl-primary-color);

+  display: flex;

+  align-items: center;

+}

+

+.cru-full-page-content-container {

+  overflow: scroll;

+}

+

+.cru-menu {

+  min-width: 200px;

+}

+

+.cru-menu-item {

+  font-size: 1.2em;

+  padding: 0.5em 1.5em;

+  cursor: pointer;

+}

+.cru-menu-item.color-primary {

+  color: #0d6efd;

+}

+.cru-menu-item.color-primary:hover {

+  color: white;

+  background-color: #0d6efd;

+}

+.cru-menu-item.color-secondary {

+  color: #6c757d;

+}

+.cru-menu-item.color-secondary:hover {

+  color: white;

+  background-color: #6c757d;

+}

+.cru-menu-item.color-success {

+  color: #198754;

+}

+.cru-menu-item.color-success:hover {

+  color: white;

+  background-color: #198754;

+}

+.cru-menu-item.color-info {

+  color: #0dcaf0;

+}

+.cru-menu-item.color-info:hover {

+  color: white;

+  background-color: #0dcaf0;

+}

+.cru-menu-item.color-warning {

+  color: #ffc107;

+}

+.cru-menu-item.color-warning:hover {

+  color: white;

+  background-color: #ffc107;

+}

+.cru-menu-item.color-danger {

+  color: #dc3545;

+}

+.cru-menu-item.color-danger:hover {

+  color: white;

+  background-color: #dc3545;

+}

+.cru-menu-item.color-light {

+  color: #f8f9fa;

+}

+.cru-menu-item.color-light:hover {

+  color: white;

+  background-color: #f8f9fa;

+}

+.cru-menu-item.color-dark {

+  color: #212529;

+}

+.cru-menu-item.color-dark:hover {

+  color: white;

+  background-color: #212529;

+}

+

+.cru-menu-item-icon {

+  margin-right: 1em;

+}

+

+.cru-menu-divider {

+  border-top: 1px solid #e9ecef;

+}

+

+.cru-tab-pages-action-area {

+  display: flex;

+  align-items: center;

+}

+

+.cru-search-input {

+  display: flex;

+  flex-wrap: wrap;

+}

+

+.alert-container {

+  position: fixed;

+  z-index: 1070;

+}

+

+@media (min-width: 576px) {

+  .alert-container {

+    bottom: 0;

+    right: 0;

+  }

+}

+@media (max-width: 575.98px) {

+  .alert-container {

+    bottom: 0;

+    right: 0;

+    left: 0;

+    text-align: center;

+  }

+}