Update theme config (#19)

* Add org overview * Add verify proofs block * Add links block * Display links * Chore code * Update theme config * Remove sass & stylelint * Rename dashboard to app * Remove useThemeMode hook * Remove ThemeMode * Move theme constants
rarimo · Jan 16, 2024 · 98d1fa7 · 98d1fa7
1 parent b034d3b
commit 98d1fa7
Show file tree

Hide file tree

Showing 47 changed files with 401 additions and 3,824 deletions.
diff --git a/.stylelintignore b/.stylelintignore
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,12 +5,9 @@ The format is based on [Keep a Changelog], and this project adheres to [Semantic
 
 ## [Unreleased]
 
-## [0.1.0] - 2023-12-07
-### Changed
+## Unreleased
+### Added
 - Initiated project
 
-[Unreleased]: https://github.com/rarimo/dashboard-rarime/compare/0.1.0...HEAD
-[0.1.0]: https://github.com/rarimo/dashboard-rarime/releases/tag/0.1.0
-
 [Keep a Changelog]: https://keepachangelog.com/en/1.0.0/
 [Semantic Versioning]: https://semver.org/spec/v2.0.0.html
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-<div align="center"><h1><b>Rarime Dashboard</b></h1></div>
+<div align="center"><h1><b>Rarime App</b></h1></div>
 
-Manage your identity credentials and Soulbound Tokens (SBTs) easily from the Rarime Dashboard.
+Manage your identity credentials and Soulbound Tokens (SBTs) easily from the Rarime App.
 
 ## Getting Started
 

diff --git a/env-example b/env-example
@@ -1,5 +1,5 @@
 VITE_MODE=production
 VITE_PORT=8000
-VITE_APP_NAME='Rarime Dashboard'
-VITE_APP_DOMAIN='https://dashboard.rarime.com'
+VITE_APP_NAME='Rarime App'
+VITE_APP_DOMAIN='https://app.rarime.com'
 VITE_DEFAULT_CHAIN='SEPOLIA'
diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
 <head>
-  <title>Rarime Dashboard</title>
+  <title>Rarime App</title>
 
   <noscript>
     <style>
@@ -16,12 +16,12 @@
   <meta name="theme-color" content="#ffffff">
 
   <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
-  <meta name="description" content="Manage your identity credentials and Soulbound Tokens (SBTs) easily from the Rarime Dashboard">
-  <meta property="og:title" content="Rarime Dashboard">
-  <meta property="og:description" content="Manage your identity credentials and Soulbound Tokens (SBTs) easily from the Rarime Dashboard.">
+  <meta name="description" content="Manage your identity credentials and Soulbound Tokens (SBTs) easily from the Rarime App">
+  <meta property="og:title" content="Rarime App">
+  <meta property="og:description" content="Manage your identity credentials and Soulbound Tokens (SBTs) easily from the Rarime App.">
   <!-- TODO: fix link to the actual one -->
-  <meta property="og:url" content="https://rarime-dashboard.com">
-  <meta property="og:image" content="/branding/logo.png">
+  <meta property="og:url" content="https://app.rarime.com">
+  <meta property="og:image" content="https://app.rarime.com/branding/logo.png">
   <meta property="og:locale" content="en_GB">
   <meta property="og:type" content="website">
   <meta name="twitter:card" content="summary_large_image">
@@ -47,7 +47,7 @@
 <body>
 <div id="root">
   <div id="noscript" class="app__init">
-    <img src="/branding/logo.svg" alt="react-template" width="280">
+    <img src="/branding/logo.svg" alt="RariMe logo" width="280">
   </div>
 </div>
 <div id="modal"></div>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "dashboard-rarime",
-  "version": "0.1.0",
-  "description": "Manage your identity credentials and Soulbound Tokens (SBTs) easily from the Rarime Dashboard.",
+  "name": "rarime-app",
+  "version": "0.0.0",
+  "description": "Manage your identity credentials and Soulbound Tokens (SBTs) easily from the Rarime App.",
   "author": "Zero Block Global Foundation",
   "license": "MIT",
   "private": true,
@@ -13,7 +13,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/rarimo/dashboard-rarime.git"
+    "url": "https://github.com/rarimo/rarime-app.git"
   },
   "gitHooks": {
     "pre-commit": "yarn lint",
@@ -25,8 +25,7 @@
     "start": "dotenv -e .env.local yarn vite-dev-server",
     "build": "dotenv -e .env.production yarn vite-build",
     "analyze": "dotenv -e .env.analyze yarn vite-build",
-    "lint": "yarn lint:styles && yarn lint:scripts",
-    "lint:styles": "stylelint \"src/**/*.{css,sass,scss}\" --max-warnings=0",
+    "lint": "yarn lint:scripts",
     "lint:scripts": "eslint \"{src,config}/**/*.{js,ts,jsx,tsx}\" --cache --fix --max-warnings=0",
     "preview": "vite preview",
     "rsc": "node scripts/release-sanity-check.mjs"
@@ -58,7 +57,6 @@
     "yup": "^1.3.2"
   },
   "devDependencies": {
-    "@comparaonline/stylelint-config-scss-modules": "^1.1.0",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@types/lodash": "^4",
@@ -84,11 +82,6 @@
     "postcss": "^8.4.24",
     "prettier": "^2.7.1",
     "rollup-plugin-visualizer": "^5.9.2",
-    "sass": "^1.63.6",
-    "stylelint": "^15.9.0",
-    "stylelint-config-standard-scss": "^9.0.0",
-    "stylelint-declaration-strict-value": "^1.9.2",
-    "stylelint-scss": "^5.0.1",
     "typescript": "^5.2.2",
     "vite": "^4.4.12",
     "vite-plugin-checker": "^0.6.1",

diff --git a/scripts/release-sanity-check.mjs b/scripts/release-sanity-check.mjs
@@ -67,7 +67,7 @@ function validateChangelogHasVersionOnTop () {
 }
 
 function validateChangelogAnchorsLegend () {
-  const baseRepoUrl = 'https://github.com/rarimo/dashboard-rarime'
+  const baseRepoUrl = 'https://github.com/rarimo/rarime-app'
   const anyReleaseTagRe =
     /## \[\d+\.\d+\.\d+((-rc|-x)\.\d+)?\] - \d{4}-\d{2}-\d{2}/gi
 

diff --git a/src/App.tsx b/src/App.tsx
@@ -2,22 +2,16 @@ import { CircularProgress, CssBaseline, Stack, ThemeProvider } from '@mui/materi
 import { FC, HTMLAttributes, memo, useCallback, useEffect, useState } from 'react'
 
 import { ErrorHandler } from '@/helpers'
-import {
-  useAuth,
-  useMetamaskZkpSnapContext,
-  useThemeMode,
-  useViewportSizes,
-  useWeb3Context,
-} from '@/hooks'
+import { useAuth, useMetamaskZkpSnapContext, useViewportSizes, useWeb3Context } from '@/hooks'
 
 import { ToastsManager } from './contexts'
 import { AppRoutes } from './routes'
+import { theme } from './theme'
 
 const App: FC<HTMLAttributes<HTMLDivElement>> = () => {
   const [isAppInitialized, setIsAppInitialized] = useState(false)
 
   const { provider, isValidChain } = useWeb3Context()
-  const { theme } = useThemeMode()
   const { checkSnapStatus } = useMetamaskZkpSnapContext()
   const { authorize } = useAuth()
 

diff --git a/src/enums/index.ts b/src/enums/index.ts
@@ -1,4 +1,3 @@
 export * from './bus'
 export * from './icons'
 export * from './routes'
-export * from './theme'
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -6,6 +6,5 @@ export * from './metamask-zkp-snap'
 export * from './provider'
 export * from './router'
 export * from './stepper'
-export * from './theme'
 export * from './viewport'
 export * from './web3'
diff --git a/src/hooks/theme.ts b/src/hooks/theme.ts
diff --git a/src/layouts/AuthLayout.tsx b/src/layouts/AuthLayout.tsx
@@ -2,13 +2,14 @@ import { Box, Stack } from '@mui/material'
 import { Outlet } from 'react-router-dom'
 
 import { config } from '@/config'
+import { vh } from '@/theme/helpers'
 
 const AuthLayout = () => {
   return (
     <Stack
       alignItems='center'
       justifyContent='center'
-      height='calc(100 * var(--vh, 1vh))'
+      height={vh(100)}
       width='100%'
       sx={{
         backgroundImage: 'url("/imgs/app-bg.png")',

diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
@@ -2,10 +2,11 @@ import { Stack } from '@mui/material'
 import { Outlet } from 'react-router-dom'
 
 import { AppNavbar } from '@/common'
+import { vh } from '@/theme/helpers'
 
 const MainLayout = () => {
   return (
-    <Stack direction='row' px={4} py={5} spacing={4} height='calc(100 * var(--vh, 1vh))'>
+    <Stack direction='row' px={4} py={5} spacing={4} height={vh(100)}>
       <AppNavbar />
       <Stack
         overflow='hidden auto'

diff --git a/src/locales/index.ts b/src/locales/index.ts
@@ -3,7 +3,7 @@ import { initReactI18next } from 'react-i18next'
 
 import resources from './resources'
 
-const STORAGE_KEY = 'dashboard-rarime-locale'
+const STORAGE_KEY = 'rarime-app-locale'
 const DEFAULT_LOCALE = 'en-US'
 
 const locale = localStorage?.getItem(STORAGE_KEY) ?? DEFAULT_LOCALE

diff --git a/src/locales/resources/en.json b/src/locales/resources/en.json
@@ -1,15 +1,15 @@
 {
   "profile-page": {
     "title" : "Profiles & Wallets",
-    "description": "Manage your identity credentials and Soulbound Tokens (SBTs) easily from this dashboard",
+    "description": "Manage your identity credentials and Soulbound Tokens (SBTs) easily from this app",
     "wallet": "Wallet",
     "filter": "Filter",
     "empty-title": "Add Credentials",
     "empty-description": "Explore credentials marketplace with different providers "
   },
   "sign-in-page": {
     "title": "Sign in",
-    "description": "Manage your identity credentials and Soulbound Tokens (SBTs) easily from this dashboard",
+    "description": "Manage your identity credentials and Soulbound Tokens (SBTs) easily from this app",
     "connect-btn": "Connect Metamask",
     "install-btn": "Install Metamask",
     "reload-page-btn": "Please, reload page"
@@ -54,6 +54,6 @@
   },
   "org-list": {
     "title": "Organizations",
-    "subtitle": "Manage your identity credentials and Soulbound Tokens (SBTs) easily from this dashboard"
+    "subtitle": "Manage your identity credentials and Soulbound Tokens (SBTs) easily from this app"
   }
 }
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,4 +1,3 @@
-import '@/styles/index.scss'
 import '@/locales'
 // eslint-disable-next-line import/no-unresolved
 import 'virtual:svg-icons-register'

diff --git a/src/pages/Orgs/pages/OrgsList/components/ListCard.tsx b/src/pages/Orgs/pages/OrgsList/components/ListCard.tsx
@@ -46,15 +46,15 @@ export default function ListCard({ org, ...rest }: Props) {
           borderColor={palette.grey[300]}
         >
           <Grid item xs={7}>
-            <Typography variant={'body3'} paragraph color={palette.text.secondary}>
+            <Typography variant={'body3'} component={'p'} color={palette.text.secondary}>
               {'Associated people'}
             </Typography>
             <Typography mt={2} color={palette.text.primary} variant={'overline'}>
               {org.members_count}
             </Typography>
           </Grid>
           <Grid item xs={5}>
-            <Typography variant={'body3'} paragraph color={palette.text.secondary}>
+            <Typography variant={'body3'} component={'p'} color={palette.text.secondary}>
               {'Credentials'}
             </Typography>
             <Typography mt={2} color={palette.text.primary} variant={'overline'}>

diff --git a/src/pages/UiKit/index.tsx b/src/pages/UiKit/index.tsx
@@ -3,11 +3,12 @@ import { Stack } from '@mui/material'
 import UiKitButtons from '@/pages/UiKit/UiKitButtons'
 import UiKitFields from '@/pages/UiKit/UiKitFields'
 import UiKitOther from '@/pages/UiKit/UiKitOther'
+import { vh } from '@/theme/helpers'
 import { UiTabs } from '@/ui'
 
 export default function UiKit() {
   return (
-    <Stack px={8} mt={40} width='100%' height='calc(100 * var(--vh, 1vh))' overflow='hidden'>
+    <Stack px={8} mt={40} width='100%' height={vh(100)} overflow='hidden'>
       <UiTabs
         tabs={[
           { label: 'BUTTONS', content: <UiKitButtons /> },

diff --git a/src/store/modules/ui.module.ts b/src/store/modules/ui.module.ts
@@ -1,26 +1,27 @@
-import { ThemeMode } from '@/enums'
+import { PaletteMode } from '@mui/material'
+
 import { createStore } from '@/helpers'
 
 interface UiStore {
   viewportWidth: number
-  themeMode?: ThemeMode
+  paletteMode?: PaletteMode
 }
 
 export const [uiStore, useUiState] = createStore(
   'ui',
   {
     viewportWidth: 0,
-    themeMode: ThemeMode.Light,
+    paletteMode: 'light',
   } as UiStore,
   state => ({
     setViewportWidth: (width: number) => {
       state.viewportWidth = width
     },
-    setThemeMode: (mode: ThemeMode) => {
-      state.themeMode = mode
+    setPaletteMode: (mode: PaletteMode) => {
+      state.paletteMode = mode
     },
     clearUiStorage: () => {
-      state.themeMode = '' as ThemeMode
+      state.paletteMode = 'light'
       state.viewportWidth = 0
     },
   }),