feat(): Create proposal adnimations and usbility tweaks

app/components/_icons/celo-logo.icon.tsx

@@ -12,7 +12,7 @@ export const CeloLogoIcon = ({
         height={height} viewBox="0 0 23 23" fill="none">
         <g clip-path="url(#clip0_5629_3299)">
             <path d="M11.832 22.2246C17.9072 22.2246 22.832 17.2997 22.832 11.2246C22.832 5.14948 17.9072 0.224609 11.832 0.224609C5.7569 0.224609 0.832031 5.14948 0.832031 11.2246C0.832031 17.2997 5.7569 22.2246 11.832 22.2246Z" fill={backgroundColor} />
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M17.9854 5.03125H5.67773V17.419H17.9863V13.0947H15.9438C15.2398 14.6725 13.6549 15.7708 11.8413 15.7708C9.34117 15.7708 7.31629 13.7151 7.31629 11.2168C7.31629 8.71757 9.34117 6.67949 11.8413 6.67949C13.6901 6.67949 15.275 7.81381 15.979 9.42597H17.9863V5.03125H17.9854Z" fill={color} />
+            <path fillRule="evenodd" clipRule="evenodd" d="M17.9854 5.03125H5.67773V17.419H17.9863V13.0947H15.9438C15.2398 14.6725 13.6549 15.7708 11.8413 15.7708C9.34117 15.7708 7.31629 13.7151 7.31629 11.2168C7.31629 8.71757 9.34117 6.67949 11.8413 6.67949C13.6901 6.67949 15.275 7.81381 15.979 9.42597H17.9863V5.03125H17.9854Z" fill={color} />
         </g>
         <defs>
             <clipPath id="clip0_5629_3299">

app/components/_icons/copy.icon.tsx

@@ -8,7 +8,7 @@ export const CopyIcon = ({
 }: BaseIconProps) => {
     return <svg xmlns="http://www.w3.org/2000/svg" width={width}
         height={height} viewBox="0 0 24 29" fill="none">
-        <path d="M15.6719 18.7832H19.9844V4.7832H8.48438V10.0332" stroke={color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M15.6719 10.0332H4.17188V24.0332H15.6719V10.0332Z" stroke={color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M15.6719 18.7832H19.9844V4.7832H8.48438V10.0332" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M15.6719 10.0332H4.17188V24.0332H15.6719V10.0332Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
 }

app/components/_icons/dark-mode.icon.tsx

@@ -7,6 +7,6 @@ export const DarkModeIcon = ({
     color = exports.black,
 }: BaseIconProps) => {
     return <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 13 13" fill="none">
-        <path d="M1.81641 5.94881C1.81571 7.01988 2.17729 8.05969 2.84237 8.89924C3.50745 9.7388 4.43693 10.3287 5.47974 10.5731C6.52254 10.8176 7.61736 10.7021 8.58623 10.2455C9.55511 9.78897 10.3411 9.01813 10.8164 8.05831C6.56291 8.05831 4.45341 5.94831 4.45341 1.69531C3.66133 2.08835 2.99476 2.6948 2.52885 3.44633C2.06293 4.19786 1.81618 5.06458 1.81641 5.94881Z" stroke={color} stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M1.81641 5.94881C1.81571 7.01988 2.17729 8.05969 2.84237 8.89924C3.50745 9.7388 4.43693 10.3287 5.47974 10.5731C6.52254 10.8176 7.61736 10.7021 8.58623 10.2455C9.55511 9.78897 10.3411 9.01813 10.8164 8.05831C6.56291 8.05831 4.45341 5.94831 4.45341 1.69531C3.66133 2.08835 2.99476 2.6948 2.52885 3.44633C2.06293 4.19786 1.81618 5.06458 1.81641 5.94881Z" stroke={color} strokeWidth="1.33" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
 }

app/components/_icons/index.tsx

@@ -7,3 +7,4 @@ export { DiscordIcon } from './discord.icon';
 export { GithubIcon } from './github.icon';
 export { LightModeIcon } from './light-mode.icon';
 export { DarkModeIcon } from './dark-mode.icon';
+export { LearnMoreIcon } from './learn-more.icon';

app/components/_icons/light-mode.icon.tsx

@@ -7,13 +7,8 @@ export const LightModeIcon = ({
     color = exports.black,
 }: BaseIconProps) => {
     return <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 13 13" fill="none">
-        <g clip-path="url(#clip0_5629_3418)">
-            <path d="M10.21 6.54232H10.6266M6.04329 2.37565V1.95898M6.04329 11.1257V10.709M9.37663 9.87565L8.95996 9.45898M9.37663 3.20898L8.95996 3.62565M2.70996 9.87565L3.12663 9.45898M2.70996 3.20898L3.12663 3.62565M1.45996 6.54232H1.87663M6.04329 9.04232C6.70633 9.04232 7.34222 8.77893 7.81106 8.31008C8.2799 7.84124 8.54329 7.20536 8.54329 6.54232C8.54329 5.87928 8.2799 5.24339 7.81106 4.77455C7.34222 4.30571 6.70633 4.04232 6.04329 4.04232C5.38025 4.04232 4.74437 4.30571 4.27553 4.77455C3.80669 5.24339 3.54329 5.87928 3.54329 6.54232C3.54329 7.20536 3.80669 7.84124 4.27553 8.31008C4.74437 8.77893 5.38025 9.04232 6.04329 9.04232Z" stroke={color} stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round" />
+        <g clipPath="url(#clip0_5629_3418)">
+            <path d="M10.21 6.54232H10.6266M6.04329 2.37565V1.95898M6.04329 11.1257V10.709M9.37663 9.87565L8.95996 9.45898M9.37663 3.20898L8.95996 3.62565M2.70996 9.87565L3.12663 9.45898M2.70996 3.20898L3.12663 3.62565M1.45996 6.54232H1.87663M6.04329 9.04232C6.70633 9.04232 7.34222 8.77893 7.81106 8.31008C8.2799 7.84124 8.54329 7.20536 8.54329 6.54232C8.54329 5.87928 8.2799 5.24339 7.81106 4.77455C7.34222 4.30571 6.70633 4.04232 6.04329 4.04232C5.38025 4.04232 4.74437 4.30571 4.27553 4.77455C3.80669 5.24339 3.54329 5.87928 3.54329 6.54232C3.54329 7.20536 3.80669 7.84124 4.27553 8.31008C4.74437 8.77893 5.38025 9.04232 6.04329 9.04232Z" stroke={color} strokeWidth="1.33" strokeLinecap="round" strokeLinejoin="round" />
         </g>
-        <defs>
-            <clipPath id="clip0_5629_3418">
-                <rect width="12" height="12" fill="white" transform="translate(0.0429688 0.542969)" />
-            </clipPath>
-        </defs>
     </svg>
 }

app/components/_icons/mento-logo.icon.tsx

@@ -14,7 +14,7 @@ export const MentoLogoIcon = ({
         height={height} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109 25" fill="none">
         <path d="M88.1069 9.16049V3.98283H81.2649V0.0234375H76.1183V3.98283H72.4854V9.16049H76.1183V16.7138C76.1183 20.9778 79.3274 24.0234 83.5658 24.0234H86.8959V18.8458H84.7767C82.6576 18.8458 81.2649 17.6275 81.2649 15.4955V9.16049H88.1069ZM103.002 18.8458V24.0234H95.4938C91.2554 24.0234 88.1069 20.9778 88.1069 16.7138V9.16049H93.2535V15.4955C93.2535 17.6275 94.5856 18.8458 96.7048 18.8458H103.002ZM93.2535 9.16049V3.98283H100.762C105 3.98283 108.148 7.02851 108.148 11.2925V18.8458H103.002V12.5107C103.002 10.3788 101.67 9.16049 99.5506 9.16049H93.2535Z" fill={color} />
         <path d="M58.6354 23.5922H53.2968V3.9906H58.6354V6.22518C59.6486 4.65705 61.6749 3.55936 64.2078 3.55936C68.923 3.55936 71.7287 7.00924 71.7287 12.1057V23.5922H66.3901V13.0073C66.3901 10.1847 65.182 8.45976 62.9608 8.45976C60.5059 8.45976 58.6354 10.2631 58.6354 14.0266V23.5922Z" fill={color} />
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M46.0097 17.2021H51.5821C50.4131 21.1616 46.5552 24.0234 41.6063 24.0234C35.6441 24.0234 31.3966 19.7111 31.3966 13.7522C31.3966 7.91092 35.7221 3.55936 41.6452 3.55936C47.3736 3.55936 52.0887 7.6757 51.8159 15.0459H36.6183C36.8521 17.3589 38.5668 19.3583 41.879 19.3583C43.7495 19.3583 45.3862 18.535 46.0097 17.2021ZM41.4894 7.91092C43.3209 7.91092 45.3082 8.891 45.9707 11.5176H36.8132C37.3198 9.36144 39.0344 7.91092 41.4894 7.91092Z" fill={color} />
+        <path fillRule="evenodd" clipRule="evenodd" d="M46.0097 17.2021H51.5821C50.4131 21.1616 46.5552 24.0234 41.6063 24.0234C35.6441 24.0234 31.3966 19.7111 31.3966 13.7522C31.3966 7.91092 35.7221 3.55936 41.6452 3.55936C47.3736 3.55936 52.0887 7.6757 51.8159 15.0459H36.6183C36.8521 17.3589 38.5668 19.3583 41.879 19.3583C43.7495 19.3583 45.3862 18.535 46.0097 17.2021ZM41.4894 7.91092C43.3209 7.91092 45.3082 8.891 45.9707 11.5176H36.8132C37.3198 9.36144 39.0344 7.91092 41.4894 7.91092Z" fill={color} />
         <path d="M0.148438 23.5922H5.48707V14.0266C5.48707 10.2631 7.08477 8.45976 9.38388 8.45976C11.4882 8.45976 12.4234 10.2239 12.4234 13.1249V23.5922H17.762V14.0266C17.762 10.2631 19.3597 8.45976 21.6588 8.45976C23.7631 8.45976 24.6984 10.2239 24.6984 13.1249V23.5922H30.037V12.2233C30.037 6.93084 27.3872 3.55936 22.75 3.55936C20.5288 3.55936 17.9179 4.73546 16.7099 7.16606C15.5409 4.89227 13.5145 3.55936 10.6698 3.55936C8.29278 3.55936 6.53921 4.69626 5.48707 6.22518V3.9906H0.148438V23.5922Z" fill={color} />
     </svg>
 }

app/components/_shared/date-picker/date-picker.module.scss

@@ -1,8 +1,5 @@
 @import "@/app/brand";
 
-@import "@/app/brand";
-
-
 .datePicker {
   position: relative;
   margin-top: $theme-unit * 3;

app/components/_shared/footer/footer.component.tsx

@@ -1,13 +1,12 @@
 import BaseComponentProps from "@interfaces/base-component-props.interface";
 import styles from './footer.module.scss';
 import classNames from "classnames";
-import {ChevronIcon, DiscordIcon, GithubIcon, MentoLogoIcon, TwitterIcon} from "@components/_icons";
+import {ChevronIcon, DiscordIcon, GithubIcon, MentoLogoIcon, TwitterIcon, LearnMoreIcon} from "@components/_icons";
 import Link from "next/link";
 import {Button} from "@components/_shared";
 import exports from '@styles/exports.module.scss';
 import {usePathname} from "next/navigation";
 import { ThemeSwitch } from "../../theme-switch/theme-switch.component";
-import { LearnMoreIcon } from "../../_icons/learn-more.icon";
 
 interface FooterProps extends BaseComponentProps {
 }

app/components/_shared/markdown-editor/markdown-editor.component.tsx

@@ -1,38 +1,86 @@
+import '@mdxeditor/editor/style.css';
 import styles from './markdown-editor.module.scss';
 import BaseComponentProps from "@interfaces/base-component-props.interface";
-import BaseInputProps from "@interfaces/base-input-props.interface";
 import classNames from "classnames";
 import {TabList} from "@components/_shared";
-import dynamic from "next/dynamic";
-import {Suspense, useEffect, useRef, useState} from "react";
-import {MDXEditorMethods} from "@mdxeditor/editor";
+import {MutableRefObject, Suspense, useEffect, useRef, useState} from "react";
+import {
+    BlockTypeSelect,
+    BoldItalicUnderlineToggles, codeBlockPlugin, codeMirrorPlugin,
+    CodeToggle,
+    CreateLink, diffSourcePlugin, headingsPlugin, imagePlugin,
+    InsertCodeBlock,
+    InsertImage,
+    InsertThematicBreak, linkDialogPlugin, linkPlugin,
+    listsPlugin,
+    ListsToggle, markdownShortcutPlugin, MDXEditor,
+    MDXEditorMethods, quotePlugin, thematicBreakPlugin,
+    toolbarPlugin,
+    UndoRedo
+} from "@mdxeditor/editor";
 import { remark } from 'remark';
 import html from 'remark-html';
-
-const EditorComp = dynamic(() => import('./partials/editor.component'), { ssr: false })
-
-interface MarkdownEditorProps extends BaseComponentProps, BaseInputProps {
+interface MarkdownEditorProps extends BaseComponentProps {
+    value: string;
+    markdownChanged: (value: string) => void;
 }
-export const MarkdownEditor = ({className, style, form}:MarkdownEditorProps) => {
+export const MarkdownEditor = ({className, style, value, markdownChanged }:MarkdownEditorProps) => {
 
     const [markdown, setMarkdown] = useState('');
     const [markdownParsed, setMarkdownParsed] = useState(null as string | null);
 
+    const editorRef = useRef<MDXEditorMethods>(null);
+
     useEffect(() => {
         remark().use(html).process(markdown).then((file) => {
             setMarkdownParsed(file.toString());
         });
-        form.onChange(markdown);
     }, [markdown]);
 
-    const ref = useRef<MDXEditorMethods>(null);
+    useEffect(() => {
+        setMarkdown(value);
+    }, [value]);
+
+    const updateValue = (value: string) => {
+        setMarkdown(value);
+        markdownChanged(value);
+    }
 
     return <div className={classNames(className)} style={style}>
         <TabList tabs={['Write', 'Preview']} headerPlacement="left">
-            <div className={styles.editor}>
-                <Suspense fallback={null}>
-                    <EditorComp markdown={markdown} setMarkdown={setMarkdown} editorRef={ref}/>
-                </Suspense>
+            <div>
+                <MDXEditor ref={editorRef}
+                           className={styles.editor}
+                           contentEditableClassName={classNames('prose', styles.editor__contentEditable)}
+                           markdown={markdown}
+                           onChange={updateValue}
+                           plugins={[
+                               toolbarPlugin({
+                                   toolbarContents: () => <>
+                                       <UndoRedo/>
+                                       <BlockTypeSelect/>
+                                       <BoldItalicUnderlineToggles/>
+                                       <CodeToggle/>
+                                       <CreateLink/>
+                                       <InsertCodeBlock/>
+                                       <InsertImage/>
+                                       <ListsToggle/>
+                                       <InsertThematicBreak/>
+                                   </>
+                               }),
+                               listsPlugin(),
+                               quotePlugin(),
+                               headingsPlugin(),
+                               linkPlugin(),
+                               linkDialogPlugin(),
+                               imagePlugin(),
+                               thematicBreakPlugin(),
+                               codeBlockPlugin({defaultCodeBlockLanguage: 'txt'}),
+                               codeMirrorPlugin({codeBlockLanguages: {js: 'JavaScript', css: 'CSS', txt: 'text', tsx: 'TypeScript'}}),
+                               diffSourcePlugin({viewMode: 'rich-text', diffMarkdown: 'boo'}),
+                               markdownShortcutPlugin()
+                           ]}
+                />
             </div>
             <div className="prose prose-neutral dark:prose-invert">
                 {

app/components/_shared/markdown-editor/markdown-editor.module.scss

@@ -1,5 +1,11 @@
 @import "@/app/brand";
-
 .editor {
-  height: 500px;
+  max-height: 100vh;
+  height: 100%;
+  background-color: $c-white;
+  border-radius: $border-radius;
+
+  &__contentEditable {
+    min-height: 450px;
+  }
 }

app/components/_shared/slider/slider.module.scss

@@ -1,12 +1,12 @@
 @import "@/app/brand";
 
+
 .sliderWrapper {
   margin-top: 6 * $theme-unit;
   width: 100%;
 
   .slider {
 
-  .slider {
     -webkit-appearance: none;
     appearance: none;
     width: 100%;
@@ -19,25 +19,6 @@
     box-shadow: 0 0 0 1px $c-lightGrey;
 
     &::-webkit-slider-thumb {
-      position: relative;
-      -webkit-appearance: none;
-      appearance: none;
-      width: 44px;
-      height: 44px;
-      background: $c-black;
-      border: 1px solid $c-black;
-      cursor: pointer;
-      border-radius: 8px;
-
-      &:before {
-        content: 'xD';
-        position: absolute;
-
-        top: -10px;
-      }
-    }
-
-    &::-moz-range-thumb {
       position: relative;
       -webkit-appearance: none;
       appearance: none;
@@ -65,18 +46,13 @@
       background: var(--foreground-color);
       border: 1px solid var(--foreground-color);
       cursor: pointer;
+      border-radius: 8px;
 
       &:before {
         content: 'xD';
         position: absolute;
 
         top: -10px;
-      &::-webkit-slider-thumb {
-        background: $c-white;
-      }
-
-      &::-moz-range-thumb {
-        background: $c-white;
       }
     }
   }