Merge branch 'feat/ui-0.7.0' into 'test'

Feat/ui 0.7.0

See merge request opensource/answer!347

ui/src/components/CustomizeTheme/index.tsx

@@ -59,6 +59,16 @@ const Index: FC = () => {
                 box-shadow: 0 0 0 0.25rem ${primaryColor.fade(0.75).string()};
                 border-color: ${tintColor(primaryColor, 0.5)};
               }
+              .form-check-input:checked {
+                background-color: ${primaryColor.hex()};
+                border-color: ${primaryColor.hex()};
+              }
+              .form-check-input:focus {
+                box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), .4);
+              }
+              .dropdown-menu {
+                --bs-dropdown-link-active-bg: rgb(var(--bs-primary-rgb));
+              }
             `}
         </style>
       )}

ui/src/components/Header/components/NavItems/index.tsx

@@ -16,23 +16,25 @@ const Index: FC<Props> = ({ redDot, userInfo, logOut }) => {
   const { t } = useTranslation();
   return (
     <>
-      <Nav.Link
-        as={NavLink}
-        to="/users/notifications/inbox"
-        className="icon-link d-flex align-items-center justify-content-center p-0 me-3 position-relative">
-        <Icon name="bell-fill" className="fs-4" />
-        {(redDot?.inbox || 0) > 0 && <div className="unread-dot bg-danger" />}
-      </Nav.Link>
+      <Nav className="flex-row">
+        <Nav.Link
+          as={NavLink}
+          to="/users/notifications/inbox"
+          className="icon-link d-flex align-items-center justify-content-center p-0 me-3 position-relative">
+          <Icon name="bell-fill" className="fs-4" />
+          {(redDot?.inbox || 0) > 0 && <div className="unread-dot bg-danger" />}
+        </Nav.Link>
 
-      <Nav.Link
-        as={Link}
-        to="/users/notifications/achievement"
-        className="icon-link d-flex align-items-center justify-content-center p-0 me-3 position-relative">
-        <Icon name="trophy-fill" className="fs-4" />
-        {(redDot?.achievement || 0) > 0 && (
-          <div className="unread-dot bg-danger" />
-        )}
-      </Nav.Link>
+        <Nav.Link
+          as={Link}
+          to="/users/notifications/achievement"
+          className="icon-link d-flex align-items-center justify-content-center p-0 me-3 position-relative">
+          <Icon name="trophy-fill" className="fs-4" />
+          {(redDot?.achievement || 0) > 0 && (
+            <div className="unread-dot bg-danger" />
+          )}
+        </Nav.Link>
+      </Nav>
 
       <Dropdown align="end">
         <Dropdown.Toggle

ui/src/components/Header/index.tsx

@@ -118,13 +118,7 @@ const Header: FC = () => {
           {/* mobile nav */}
           <div className="d-flex lg-none align-items-center flex-lg-nowrap">
             {user?.username ? (
-              <Nav className="flex-row">
-                <NavItems
-                  redDot={redDot}
-                  userInfo={user}
-                  logOut={handleLogout}
-                />
-              </Nav>
+              <NavItems redDot={redDot} userInfo={user} logOut={handleLogout} />
             ) : (
               <>
                 <Button variant="link" className="me-2" href="/users/login">