Merge pull request #11 from ekaterinburgdev/ecosystem-panel-redesign

Ecosystem panel redesign

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ekb",
   "type": "module",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/ekaterinburgdev/ekaterinburg-ui.git"
@@ -29,19 +29,19 @@
   "devDependencies": {
     "@babel/core": "7.17.8",
     "@mdx-js/react": "^2.2.1",
-    "@storybook/addon-a11y": "7.0.0-beta.36",
-    "@storybook/addon-actions": "7.0.0-beta.36",
-    "@storybook/addon-docs": "7.0.0-beta.36",
-    "@storybook/addon-essentials": "7.0.0-beta.36",
-    "@storybook/addon-links": "7.0.0-beta.36",
-    "@storybook/react": "7.0.0-beta.36",
-    "@storybook/react-vite": "7.0.0-beta.36",
+    "@storybook/addon-a11y": "7.0.0-beta.41",
+    "@storybook/addon-actions": "7.0.0-beta.41",
+    "@storybook/addon-docs": "7.0.0-beta.41",
+    "@storybook/addon-essentials": "7.0.0-beta.41",
+    "@storybook/addon-links": "7.0.0-beta.41",
+    "@storybook/react": "7.0.0-beta.41",
+    "@storybook/react-vite": "7.0.0-beta.41",
     "@types/node": "17.0.23",
     "@types/react": "17.0.43",
     "@types/react-dom": "17.0.14",
     "@vitejs/plugin-react": "1.2.0",
     "babel-loader": "8.2.4",
-    "storybook": "7.0.0-beta.36",
+    "storybook": "7.0.0-beta.41",
     "typescript": "4.6.3",
     "vite": "4.0.4",
     "vite-plugin-dts": "1.7.1"

src/lib/components/AnimatedLogo/AnimatedLogo.module.css

@@ -1,15 +1,17 @@
-.logo {
-  transition: transform var(--transition-duration) var(--transition-timing-function);
+/* .logo {
+  transition: transform var(--projects-panel-transition) var(--transition-timing-function);
   animation: scale var(--spin-time) ease-in-out infinite;
-}
+} */
 
 .logo svg {
   width: 94%;
   height: auto;
   margin: 3%;
-  transition: transform var(--transition-duration) var(--transition-timing-function);
+  transition: transform var(--projects-panel-transition) var(--transition-timing-function);
 }
 
+
+
 .circles {
   height: var(--circle-size);
   width: var(--circle-size);
@@ -18,55 +20,62 @@
   top: 50%;
   left: 50%;
   transform: translate3D(-50%, -50%, 0) scale(1);
-  transition: all var(--transition-duration) var(--transition-timing-function);
+  transition: all var(--projects-panel-transition) var(--transition-timing-function);
+	z-index: 100;
 
   &:hover {
     transform: translate3D(-50%, -50%, 0) scale(1.1);
   }
 
   &.circles_with_hover:hover {
-  
+
     .logo svg {
       transform: scale(0.85);
     }
-  
+
     .circle.first {
       border-width: var(--circle-stroke-hover);
     }
-  
+
     .circle.second {
       border-width: var(--circle-stroke-hover);
     }
-  
+
     .circle.third {
       border-width: var(--circle-stroke-hover);
     }
   }
-  
+
   &.circles_active,
   &:active {
-    transform: translate3D(-50%, -50%, 0) scale(1.1);
-  
+    transform: translate3D(-41%,-61%,0) scale(1.6);
+
     .logo svg {
       transform: scale(1.15);
     }
-  
+
     .circle.first {
       background-color: #00bb00;
       border-width: 0;
+      box-shadow: 0 0 3vmin 0 rgba(0, 220, 0, .5);
     }
-  
+
     .circle.second {
       border-width: var(--circle-stroke-active);
     }
-  
+
     .circle.third {
       border-width: var(--circle-stroke-active);
     }
   }
 
-  &.circles_active .circle{
-    border-radius: 1000px
+  &.circles_active {
+    .circle {
+      border-radius: 1000px
+    }
+    .logo svg path {
+      transition: all var(--projects-panel-transition) var(--transition-timing-function);
+    }
   }
 }
 
@@ -75,11 +84,11 @@
     &.first {
       box-shadow: 0 0 0vmin 0 rgba(170, 255, 170, 0) inset;
     }
-  
+
     &.second {
       box-shadow: 0 0 0 0vmin rgba(255, 212, 0, 0);
     }
-  
+
     &.third {
       box-shadow: 0 0 var(--shadow-size) 0 rgba(0, 180, 0, 0.7), 0 0 var(--shadow-size) 0 rgba(0, 255, 0, 0.5) inset;
     }
@@ -95,7 +104,7 @@
     .circle.first {
       box-shadow: 0 0 10vmin 0 rgba(255, 255, 255, 0.5) inset;
     }
-  
+
     .circle.third {
       box-shadow: 0 0 var(--shadow-size) 0 #00b400, 0 0 var(--shadow-size) 0 rgba(0, 255, 0, 0.6) inset;
     }
@@ -109,9 +118,10 @@
   height: 100%;
   border: solid transparent;
   border-width: var(--circle-stroke);
-  border-radius: 115% 140% 145% 110%/125% 140% 110% 125%;
+  /* border-radius: 115% 140% 145% 110%/125% 140% 110% 125%; */
+  border-radius: 1000px;
   mix-blend-mode: overlay;
-  transition: all var(--transition-duration) var(--transition-timing-function);
+  transition: all var(--projects-panel-transition) var(--transition-timing-function);
 
   &.first {
     border-color: #00b400;

src/lib/components/AnimatedLogo/AnimatedLogo.stories.tsx

@@ -1,12 +1,12 @@
 import { StoryFn } from '@storybook/react';
-import { AnimatedLogo } from './AnimatedLogo';
+import { AnimatedLogo, Props } from './AnimatedLogo';
 
 export default {
   title: 'Organisms/AnimatedLogo',
   component: AnimatedLogo,
 };
 
-const Template: StoryFn<typeof AnimatedLogo> = (args) => (
+const Template: StoryFn<typeof AnimatedLogo> = (args: Props) => (
   <AnimatedLogo {...args} />
 );
 

src/lib/components/AnimatedLogo/AnimatedLogo.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import styles from './AnimatedLogo.module.css';
 
-interface Props {
+export interface Props {
   radius?: string;
   time?: string;
   displacement?: string;
@@ -15,7 +15,7 @@ interface Props {
 export function AnimatedLogo({
   time = '10s',
   radius = '50vmin',
-  displacement = '2%',
+  displacement = '2.5%',
   shadow = '10vh',
   shadowed = false,
   active = false,
@@ -40,7 +40,7 @@ export function AnimatedLogo({
             '--displacement': displacement,
             '--shadow-size': shadow,
             '--shadow-opacity': 0.35,
-            '--transition-duration': '0.15s',
+            '--transition-duration': '0.2s',
             '--transition-timing-function': 'ease-in-out',
           } as React.CSSProperties
         }

src/lib/components/ProjectsPanel/ProjectsPanel.stories.tsx

@@ -1,13 +1,13 @@
 import { StoryFn } from '@storybook/react';
-
 import { ProjectsPanel, PROJECT_GUIDES, PROJECT_TRANSPORT } from '.';
+import { Props } from './components/ProjectsPanel';
 
 export default {
   title: 'Organisms/ProjectsPanel',
   component: ProjectsPanel,
 };
 
-const Template: StoryFn<typeof ProjectsPanel> = (args) => (
+const Template: StoryFn<typeof ProjectsPanel> = (args: Props) => (
   <ProjectsPanel {...args} />
 );
 

src/lib/components/ProjectsPanel/components/Modal.module.css

@@ -1,8 +1,10 @@
 .modal {
-  transition: 0.2s all ease;
   font-family: 'Iset Sans', sans-serif;
   position: fixed;
   -webkit-tap-highlight-color: transparent;
+  transition: var(--projects-panel-transition) all ease-in-out;
+  left: 16px;
+  bottom: 16px;
 }
 
 .modal__overlay {
@@ -16,16 +18,15 @@
   z-index: -1;
   opacity: 0;
   visibility: hidden;
-  transition: 0.2s all ease;
+  transition: var(--projects-panel-transition) all ease-in-out;
 }
 
 .modal__content {
   position: absolute;
   bottom: 0;
-  padding: 16px 0 0;
   visibility: hidden;
   opacity: 0;
-  transition: 0.3s all ease;
+  transition: var(--projects-panel-transition) all ease-in-out;
   transform: scale(0);
   transform-origin: 20px calc(100% - 10px);
   border-radius: 38px;
@@ -36,6 +37,9 @@
 .modal__scroller {
   overflow: auto;
   max-height: 70vh;
+  border-radius: 18px;
+  background-color: rgba(var(--projects-panel-hover), 0.2);
+  margin: 20px;
 }
 
 .modal__scroller::-webkit-scrollbar {
@@ -51,7 +55,7 @@
 }
 
 .modal__subcontent {
-  margin-right: 16px;
+  margin-right: 20px;
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -74,10 +78,23 @@
   z-index: 1;
 }
 
-/* mobile */
 @media screen and (max-width: 600px) {
+  .modal {
+    left: 8px;
+    bottom: 8px;
+  }
+
+  .modal__content {
+    border-radius: 28px;
+  }
+
+  .modal__scroller {
+    border-radius: 16px;
+    margin: 12px 12px 0;
+  }
+
   .modal__subcontent {
-    padding-bottom: 72px;
-    justify-content: center;
+    height: 72px;
+    margin-right: 12px;
   }
 }

src/lib/components/ProjectsPanel/components/Modal.tsx

@@ -1,17 +1,17 @@
-import { useCallback, useState } from "react";
-import { useHotkeys } from 'react-hotkeys-hook'
-import classNames from "classnames";
-import FocusLock from "react-focus-lock";
-import styles from "./Modal.module.css";
-import { Theme } from "../types";
+import { useCallback, useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import classNames from 'classnames';
+import FocusLock from 'react-focus-lock';
+import styles from './Modal.module.css';
+import { Theme } from '../types';
 
 export function useModal() {
   const [isOpen, setisOpen] = useState(false);
   const close = useCallback(() => setisOpen(false), []);
   const toggle = useCallback(() => setisOpen(!isOpen), [setisOpen, isOpen]);
 
-  useHotkeys('esc', close)
-  
+  useHotkeys('esc', close);
+
   return { isOpen, toggle, close };
 }
 
@@ -44,7 +44,7 @@ export function Modal({
         <div onClick={onClose} className={styles.modal__overlay} />
         <div className={styles.modal__content}>
           <div className={styles.modal__scroller}>{children}</div>
-          <div className={styles.modal__divider} />
+          {/* <div className={styles.modal__divider} /> */}
           {link && <div className={styles.modal__subcontent}>{link}</div>}
         </div>
         <div className={styles.modal__toggle}>{handler}</div>