Merge pull request #95 from oasisprotocol/csillag/small-ui-tweaks

Small UI tweaks
oasisprotocol · Oct 29, 2024 · 0a1f0ab · 0a1f0ab
2 parents c9ffc98 + 7dc7ee3
commit 0a1f0ab
Show file tree

Hide file tree

Showing 10 changed files with 123 additions and 100 deletions.
diff --git a/frontend/src/components/Card/index.module.css b/frontend/src/components/Card/index.module.css
@@ -48,10 +48,14 @@
 
 @media screen and (max-width: 1000px) {
   .card {
+    border-radius: 0;
+    border: none;
     position: unset;
     padding: 1.375rem;
     min-width: unset;
     max-width: unset;
+    width: 100%;
+    height: 2000px;
     margin-bottom: 1.25rem;
   }
 }
diff --git a/frontend/src/components/InputFields/InputFieldGroup.tsx b/frontend/src/components/InputFields/InputFieldGroup.tsx
@@ -29,35 +29,36 @@ export const InputFieldGroup: FC<InputFieldGroupProps> = ({
   fields,
   alignRight,
   expandHorizontally = true,
-}) => (
-  <div
-    className={StringUtils.clsx(
-      classes.fieldGroup,
-      expandHorizontally ? classes.fieldGroupExpand : classes.fieldGroupCompact,
-    )}
-  >
-    {fields.map((row, index) =>
-      Array.isArray(row) ? (
-        <WithVisibility
-          key={`field-${index}`}
-          field={{
-            visible: row.some(controls => controls.visible),
-            name: `group-${index}`,
-            containerClassName: StringUtils.clsx(
-              alignRight ? classes.fieldRowRight : classes.fieldRow,
-              expandHorizontally ? classes.fieldRowExpand : classes.fieldRowCompact,
-            ),
-            expandHorizontally: expandHorizontally,
-          }}
-          padding={false}
-        >
-          {row.map(field => (
-            <InputField key={field.name} controls={{ ...(field as any), expandHorizontally }} />
-          ))}
-        </WithVisibility>
-      ) : (
-        <InputField key={row.name} controls={row as InputFieldControls<any>} />
-      ),
-    )}
-  </div>
-)
+}) =>
+  fields.some(row => (Array.isArray(row) ? row.some(col => col.visible) : row.visible)) ? (
+    <div
+      className={StringUtils.clsx(
+        classes.fieldGroup,
+        expandHorizontally ? classes.fieldGroupExpand : classes.fieldGroupCompact,
+      )}
+    >
+      {fields.map((row, index) =>
+        Array.isArray(row) ? (
+          <WithVisibility
+            key={`field-${index}`}
+            field={{
+              visible: row.some(controls => controls.visible),
+              name: `group-${index}`,
+              containerClassName: StringUtils.clsx(
+                alignRight ? classes.fieldRowRight : classes.fieldRow,
+                expandHorizontally ? classes.fieldRowExpand : classes.fieldRowCompact,
+              ),
+              expandHorizontally: expandHorizontally,
+            }}
+            padding={false}
+          >
+            {row.map(field => (
+              <InputField key={field.name} controls={{ ...(field as any), expandHorizontally }} />
+            ))}
+          </WithVisibility>
+        ) : (
+          <InputField key={row.name} controls={row as InputFieldControls<any>} />
+        ),
+      )}
+    </div>
+  ) : undefined
diff --git a/frontend/src/components/InputFields/useLabel.ts b/frontend/src/components/InputFields/useLabel.ts
@@ -76,11 +76,13 @@ export function useLabel<DataType = MarkdownCode>(props: LabelProps<DataType>):
   )
 
   const renderedContent = renderer(value, tagName)
+  const visible = controls.visible && controls.value !== ''
 
   return {
     ...controls,
     value,
     classnames: getAsArray(classnames),
     renderedContent,
+    visible,
   }
 }
diff --git a/frontend/src/components/Layout/index.module.css b/frontend/src/components/Layout/index.module.css
@@ -1,3 +1,26 @@
+.dark-layout {
+  background: #130fff;
+  color: white;
+}
+
+.light-layout {
+  background: white;
+  color: var(--navy-blue);
+}
+
+.dashboard-layout {
+  background: linear-gradient(180deg, #e6e5ff 0%, #d2d1ff 100%);
+}
+
+.landing-layout {
+  height: 100dvh;
+  background-image: url('background.svg');
+  background-size: 2000px 2000px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  color: var(--navy-blue);
+}
+
 .header {
   display: flex;
   justify-content: space-between;

diff --git a/frontend/src/components/Layout/index.tsx b/frontend/src/components/Layout/index.tsx
@@ -13,10 +13,10 @@ import { Link, useLocation } from 'react-router-dom'
 type LayoutVariation = 'landing' | 'dashboard' | 'light' | 'dark'
 
 const layoutClasses: Partial<Record<LayoutVariation, string>> = {
-  landing: 'landing-layout',
-  dashboard: 'dashboard-layout',
-  dark: 'dark-layout',
-  light: 'light-layout',
+  landing: classes.landingLayout,
+  dashboard: classes.dashboardLayout,
+  dark: classes.darkLayout,
+  light: classes.lightLayout,
 }
 
 const logoColor: Record<LayoutVariation, string> = {

diff --git a/frontend/src/components/LayoutBase/index.module.css b/frontend/src/components/LayoutBase/index.module.css
@@ -40,7 +40,15 @@
 
 @media screen and (max-width: 1000px) {
   .layout {
-    padding: 0 1.5rem 0.25rem;
+    padding: 0;
+  }
+
+  .main {
+    max-width: unset;
+  }
+
+  header {
+    padding: 0 1rem
   }
 
   .footer {

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -81,29 +81,6 @@ h3 {
   }
 }
 
-.landing-layout {
-  height: 100dvh;
-  background-image: url('background.svg');
-  background-size: 2000px 2000px;
-  background-position: center center;
-  background-repeat: no-repeat;
-  color: var(--navy-blue);
-}
-
-.dashboard-layout {
-  background: linear-gradient(180deg, #e6e5ff 0%, #d2d1ff 100%);
-}
-
-.dark-layout {
-  background: #130fff;
-  color: white;
-}
-
-.light-layout {
-  background: white;
-  color: var(--navy-blue);
-}
-
 .niceLine,
 .niceLineWide {
   display: flex;

diff --git a/frontend/src/pages/PollPage/ActivePoll.tsx b/frontend/src/pages/PollPage/ActivePoll.tsx
@@ -8,13 +8,14 @@ import { ConnectWallet } from '../../components/ConnectWallet'
 import { Card } from '../../components/Card'
 import { SocialShares } from '../../components/SocialShares'
 import { getVerdict, getReason, InputFieldGroup } from '../../components/InputFields'
-import { WarningCircleIcon } from '../../components/icons/WarningCircleIcon'
 import { PollAccessIndicatorWrapper } from '../../components/PollCard/PollAccessIndicator'
 import { designDecisions, nativeTokenSymbol } from '../../constants/config'
 import { SpinnerIcon } from '../../components/icons/SpinnerIcon'
 import { AnimatePresence } from 'framer-motion'
 import { MotionDiv } from '../../components/Animations'
 import { MarkdownBlock } from '../../components/Markdown'
+import { StringUtils } from '../../utils/string.utils'
+import { MaybeWithTooltip } from '../../components/Tooltip/MaybeWithTooltip'
 
 export const ActivePoll: FC<PollData> = ({
   hasWallet,
@@ -75,6 +76,7 @@ export const ActivePoll: FC<PollData> = ({
 
   const { canVote: canAclVote, explanation: aclExplanation } = permissions
 
+  const canVote = getVerdict(canAclVote, false)
   // console.log("selected:", selectedChoice, "can select?", canSelect, "can Vote?", canVote, "voting?", isVoting)
   return (
     <Card className={classes.darkCard}>
@@ -102,7 +104,12 @@ export const ActivePoll: FC<PollData> = ({
                 exit={{ opacity: 0, height: 0 }}
                 transition={{ duration: 0.5 }}
                 key={`choice-${index}`}
-                className={`${classes.choice} ${classes.darkChoice} ${canSelect ? classes.activeChoice : ''} ${selectedChoice?.toString() === index.toString() ? classes.selectedChoice : ''}`}
+                className={StringUtils.clsx(
+                  classes.choice,
+                  classes.darkChoice,
+                  canSelect ? classes.activeChoice : classes.disabledChoice,
+                  selectedChoice?.toString() === index.toString() ? classes.selectedChoice : undefined,
+                )}
                 onClick={() => handleSelect(index)}
               >
                 <div className={classes.above}>{choice}</div>
@@ -116,49 +123,35 @@ export const ActivePoll: FC<PollData> = ({
         fields={[walletLabel, remainingTimeLabel, publishVotesLabel, publishVotersLabel, resultsLabel]}
         expandHorizontally={false}
       />
-      {hasWallet && !getVerdict(canAclVote, false) ? (
+      {hasWallet && !canVote ? (
         <AnimatePresence>
-          <MotionDiv
-            title={correctiveAction ? 'Click to check again' : undefined}
-            reason={'permissionWarning'}
-            key={'warning-icon'}
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: 'auto', opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            onClick={() => {
-              if (correctiveAction) {
-                console.log('Retrying')
-                correctiveAction()
-              } else {
-                console.log('no corrective action')
-              }
-            }}
-          >
-            {permissionsPending ? (
-              <SpinnerIcon size={'large'} spinning />
-            ) : (
-              <WarningCircleIcon size={'large'} />
-            )}
-          </MotionDiv>
-          <MotionDiv
-            reason={'permissionWarning'}
-            key={'warning-message'}
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: 'auto', opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-          >
-            <MarkdownBlock
-              mainTag={'h4'}
-              code={`You can't vote on this poll, since ${getReason(canAclVote) as string}.`}
-            />
-          </MotionDiv>
+          <MaybeWithTooltip overlay={correctiveAction ? 'Click to check again' : undefined}>
+            <div
+              className={StringUtils.clsx(canVote ? undefined : classes.whyNoVote, 'niceLine')}
+              key={'warning-message'}
+              onClick={() => {
+                if (correctiveAction) {
+                  console.log('Retrying')
+                  correctiveAction()
+                } else {
+                  console.log('no corrective action')
+                }
+              }}
+            >
+              {permissionsPending && <SpinnerIcon size={'medium'} spinning />}
+              <MarkdownBlock
+                mainTag={'h4'}
+                code={`You can't vote on this poll, since ${getReason(canAclVote) as string}.`}
+              />
+            </div>
+          </MaybeWithTooltip>
         </AnimatePresence>
       ) : (
         aclExplanation && (
-          <>
+          <div className={canVote ? undefined : classes.whyNoVote}>
             <MarkdownBlock code={aclExplanation} mainTag={'h4'} />
-            {getVerdict(canAclVote, false) && <h4>You have access.</h4>}
-          </>
+            {canVote && <h4>You have access.</h4>}
+          </div>
         )
       )}
       <InputFieldGroup

diff --git a/frontend/src/pages/PollPage/hook.ts b/frontend/src/pages/PollPage/hook.ts
@@ -161,6 +161,7 @@ export const usePollData = (pollId: string) => {
   const gaslessLabel = useLabel<boolean | undefined>({
     name: 'gaslessIndicator',
     value: gaslessPossible,
+    visible: getVerdict(permissions.canVote, false),
     renderer: showGaslessPossible,
   })
 

diff --git a/frontend/src/pages/PollPage/index.module.css b/frontend/src/pages/PollPage/index.module.css
@@ -75,6 +75,11 @@
   box-shadow: 0 7px 7px 0 rgba(0, 0, 0, 0.17);
 }
 
+.disabledChoice {
+  cursor: not-allowed;
+  color: #abadb5;
+}
+
 .countdownContainer {
   display: flex;
   flex-direction: row;
@@ -125,3 +130,12 @@
   background: #d2d1ff;
   border-radius: 8px;
 }
+
+.whyNoVote {
+  margin-top: 1em;
+  border: 1px solid #ed6c02;
+  border-radius: 8px;
+  background: #ffe0c7;
+  padding: 1em;
+
+}