Skip to content

Commit

Permalink
add icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@nahbee10
nahbee10 committed Nov 15, 2024
1 parent a19f1a0 commit 8294ed2
Show file tree
Hide file tree
Showing 9 changed files with 285 additions and 50 deletions.
162 changes: 162 additions & 0 deletions src/components/Icons/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,7 @@ export const Menu: FC<{
</svg>
)
}

export const Moon: FC<{
className?: string
color?: 'neutral-2'
Expand All @@ -186,6 +187,167 @@ export const Moon: FC<{
)
}

export const Edit: FC<{
className?: string
color?: 'neutral-2'
}> = ({ className, color = 'neutral-2' }) => {
return (
<svg className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Icon">
<path
id="Vector"
d="M10.6667 14.5001H4C2.388 14.5001 1.5 13.6121 1.5 12.0001V5.33348C1.5 3.72148 2.388 2.83348 4 2.83348H6C6.276 2.83348 6.5 3.05748 6.5 3.33348C6.5 3.60948 6.276 3.83348 6 3.83348H4C2.94867 3.83348 2.5 4.28215 2.5 5.33348V12.0001C2.5 13.0515 2.94867 13.5001 4 13.5001H10.6667C11.718 13.5001 12.1667 13.0515 12.1667 12.0001V10.0001C12.1667 9.72415 12.3907 9.50015 12.6667 9.50015C12.9427 9.50015 13.1667 9.72415 13.1667 10.0001V12.0001C13.1667 13.6121 12.2787 14.5001 10.6667 14.5001ZM13.72 3.35348L12.6466 2.28016C12.2666 1.90682 11.66 1.90681 11.28 2.28681L10.38 3.19349L12.8067 5.62014L13.7133 4.72014C14.0933 4.34014 14.0933 3.73348 13.72 3.35348ZM9.67334 3.90015L5.33333 8.26016V10.6668H7.73999L12.1 6.32681L9.67334 3.90015Z"
className={cn({
'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/edit-icon:fill-light-neutral-1 group-hover/edit-icon:dark:fill-dark-neutral-1':
color === 'neutral-2',
})}
/>
</g>
</svg>
)
}

export const Happy: FC<{
className?: string
color?: 'neutral-2'
}> = ({ className, color = 'neutral-2' }) => {
return (
<svg className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
<circle
cx="10"
cy="10"
r="9"
className={cn({
'stroke-light-neutral-2 dark:stroke-dark-neutral-2 group-hover/happy:stroke-light-neutral-1 group-hover/happy:dark:stroke-dark-neutral-1 group-[.selected]/happy:fill-light-status-success-1 group-[.selected]/happy:dark:fill-dark-status-success-1 group-[.selected]/happy:stroke-light-neutral-1 group-[.selected]/happy:dark:stroke-dark-neutral-1':
color === 'neutral-2',
})}
stroke-width="2"

Check failure on line 224 in src/components/Icons/index.tsx

View workflow job for this annotation

GitHub Actions / Run linters 

Unknown property 'stroke-width' found, use 'strokeWidth' instead

Check failure on line 224 in src/components/Icons/index.tsx

View workflow job for this annotation

GitHub Actions / Check uniswap Benchmarks 

Unknown property 'stroke-width' found, use 'strokeWidth' instead
/>
<circle
cx="7"
cy="8"
r="1"
className={cn({
'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/happy:fill-light-neutral-1 group-hover/happy:dark:fill-dark-neutral-1 group-[.selected]/happy:fill-light-neutral-1 group-[.selected]/happy:dark:fill-dark-neutral-1':
color === 'neutral-2',
})}
/>
<circle
cx="13"
cy="8"
r="1"
className={cn({
'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/happy:fill-light-neutral-1 group-hover/happy:dark:fill-dark-neutral-1 group-[.selected]/happy:fill-light-neutral-1 group-[.selected]/happy:dark:fill-dark-neutral-1':
color === 'neutral-2',
})}
/>
<path
d="M6 12C6 12 7.29032 14 10 14C12.7097 14 14 12 14 12"
className={cn({
'stroke-light-neutral-2 dark:stroke-dark-neutral-2 group-hover/happy:stroke-light-neutral-1 group-hover/happy:dark:stroke-dark-neutral-1 group-[.selected]/happy:stroke-light-neutral-1 group-[.selected]/happy:dark:stroke-dark-neutral-1':
color === 'neutral-2',
})}
stroke-width="2"

Check failure on line 250 in src/components/Icons/index.tsx

View workflow job for this annotation

GitHub Actions / Run linters 

Unknown property 'stroke-width' found, use 'strokeWidth' instead

Check failure on line 250 in src/components/Icons/index.tsx

View workflow job for this annotation

GitHub Actions / Check uniswap Benchmarks 

Unknown property 'stroke-width' found, use 'strokeWidth' instead
stroke-linecap="round"

Check failure on line 251 in src/components/Icons/index.tsx

View workflow job for this annotation

GitHub Actions / Run linters 

Unknown property 'stroke-linecap' found, use 'strokeLinecap' instead

Check failure on line 251 in src/components/Icons/index.tsx

View workflow job for this annotation

GitHub Actions / Check uniswap Benchmarks 

Unknown property 'stroke-linecap' found, use 'strokeLinecap' instead
/>
</svg>
)
}

export const Neutral: FC<{
className?: string
color?: 'neutral-2'
}> = ({ className, color = 'neutral-2' }) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 20 20" fill="none">
<circle
cx="10"
cy="10"
r="9"
className={cn({
'stroke-light-neutral-2 dark:stroke-dark-neutral-2 group-hover/neutral:stroke-light-neutral-1 group-hover/neutral:dark:stroke-dark-neutral-1 group-[.selected]/neutral:fill-light-status-warning-1 group-[.selected]/neutral:dark:fill-dark-status-warning-1 group-[.selected]/neutral:stroke-light-neutral-1 group-[.selected]/neutral:dark:stroke-dark-neutral-1':
color === 'neutral-2',
})}
stroke-width="2"

Check failure on line 271 in src/components/Icons/index.tsx

View workflow job for this annotation

GitHub Actions / Run linters 

Unknown property 'stroke-width' found, use 'strokeWidth' instead

Check failure on line 271 in src/components/Icons/index.tsx

View workflow job for this annotation

GitHub Actions / Check uniswap Benchmarks 

Unknown property 'stroke-width' found, use 'strokeWidth' instead
/>
<circle
cx="7"
cy="8"
r="1"
className={cn({
'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/neutral:fill-light-neutral-1 group-hover/neutral:dark:fill-dark-neutral-1 group-[.selected]/neutral:fill-light-neutral-1 group-[.selected]/neutral:dark:fill-dark-neutral-1':
color === 'neutral-2',
})}
/>
<circle
cx="13"
cy="8"
r="1"
className={cn({
'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/neutral:fill-light-neutral-1 group-hover/neutral:dark:fill-dark-neutral-1 group-[.selected]/neutral:fill-light-neutral-1 group-[.selected]/neutral:dark:fill-dark-neutral-1':
color === 'neutral-2',
})}
/>
<path
d="M7 13C7 13 7.96774 13 10 13C12.0323 13 13 13 13 13"
className={cn({
'stroke-light-neutral-2 dark:stroke-dark-neutral-2 group-hover/neutral:stroke-light-neutral-1 group-hover/neutral:dark:stroke-dark-neutral-1 group-[.selected]/neutral:stroke-light-neutral-1 group-[.selected]/neutral:dark:stroke-dark-neutral-1':
color === 'neutral-2',
})}
stroke-width="2"

Check failure on line 297 in src/components/Icons/index.tsx

View workflow job for this annotation

GitHub Actions / Run linters 

Unknown property 'stroke-width' found, use 'strokeWidth' instead

Check failure on line 297 in src/components/Icons/index.tsx

View workflow job for this annotation

GitHub Actions / Check uniswap Benchmarks 

Unknown property 'stroke-width' found, use 'strokeWidth' instead
stroke-linecap="round"

Check failure on line 298 in src/components/Icons/index.tsx

View workflow job for this annotation

GitHub Actions / Run linters 

Unknown property 'stroke-linecap' found, use 'strokeLinecap' instead

Check failure on line 298 in src/components/Icons/index.tsx

View workflow job for this annotation

GitHub Actions / Check uniswap Benchmarks 

Unknown property 'stroke-linecap' found, use 'strokeLinecap' instead
/>
</svg>
)
}

export const Sad: FC<{
className?: string
color?: 'neutral-2'
}> = ({ className, color = 'neutral-2' }) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 20 20" fill="none">
<circle
cx="10"
cy="10"
r="9"
className={cn({
'stroke-light-neutral-2 dark:stroke-dark-neutral-2 group-hover/sad:stroke-light-neutral-1 group-hover/sad:dark:stroke-dark-neutral-1 group-[.selected]/sad:fill-light-status-critical-1 group-[.selected]/sad:dark:fill-dark-status-critical-1 group-[.selected]/sad:stroke-light-neutral-1 group-[.selected]/sad:dark:stroke-dark-neutral-1':
color === 'neutral-2',
})}
stroke-width="2"

Check failure on line 318 in src/components/Icons/index.tsx

View workflow job for this annotation

GitHub Actions / Run linters 

Unknown property 'stroke-width' found, use 'strokeWidth' instead

Check failure on line 318 in src/components/Icons/index.tsx

View workflow job for this annotation

GitHub Actions / Check uniswap Benchmarks 

Unknown property 'stroke-width' found, use 'strokeWidth' instead
/>
<circle
cx="7"
cy="8"
r="1"
className={cn({
'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/sad:fill-light-neutral-1 group-hover/sad:dark:fill-dark-neutral-1 group-[.selected]/sad:fill-light-neutral-1 group-[.selected]/sad:dark:fill-dark-neutral-1':
color === 'neutral-2',
})}
/>
<circle
cx="13"
cy="8"
r="1"
className={cn({
'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/sad:fill-light-neutral-1 group-hover/sad:dark:fill-dark-neutral-1 group-[.selected]/sad:fill-light-neutral-1 group-[.selected]/sad:dark:fill-dark-neutral-1':
color === 'neutral-2',
})}
/>
<path
d="M14 13C14 13 12.7097 11 10 11C7.29032 11 6 13 6 13"
className={cn({
'stroke-light-neutral-2 dark:stroke-dark-neutral-2 group-hover/sad:stroke-light-neutral-1 group-hover/sad:dark:stroke-dark-neutral-1 group-[.selected]/sad:stroke-light-neutral-1 group-[.selected]/sad:dark:stroke-dark-neutral-1':
color === 'neutral-2',
})}
stroke-width="2"

Check failure on line 344 in src/components/Icons/index.tsx

View workflow job for this annotation

GitHub Actions / Run linters 

Unknown property 'stroke-width' found, use 'strokeWidth' instead

Check failure on line 344 in src/components/Icons/index.tsx

View workflow job for this annotation

GitHub Actions / Check uniswap Benchmarks 

Unknown property 'stroke-width' found, use 'strokeWidth' instead
stroke-linecap="round"

Check failure on line 345 in src/components/Icons/index.tsx

View workflow job for this annotation

GitHub Actions / Run linters 

Unknown property 'stroke-linecap' found, use 'strokeLinecap' instead

Check failure on line 345 in src/components/Icons/index.tsx

View workflow job for this annotation

GitHub Actions / Check uniswap Benchmarks 

Unknown property 'stroke-linecap' found, use 'strokeLinecap' instead
/>
</svg>
)
}

export type Icon = 'sun' | 'moon'

export const IconMap: FC<{
Expand Down
97 changes: 56 additions & 41 deletions src/components/SentimentTracking/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { TraceEvent } from '@uniswap/analytics'
import { BrowserEvent, DocsSentiment, DocsSentimentSection, SharedEventName } from '@uniswap/analytics-events'
import React, { useCallback, useState } from 'react'
import { Frown, Meh, Smile } from 'react-feather'
import { Happy, Sad, Neutral } from '../Icons'
import cn from 'classnames'

enum Sentiment {
NEGATIVE = 'NEGATIVE',
Expand All @@ -18,47 +19,61 @@ export default function SentimentTracking({ analyticsSection }: { analyticsSecti
)

return (
<div>
<div className="flex flex-row space-x-4">
<div className="Sentiment__question">Was this helpful?</div>
<TraceEvent
element={DocsSentiment.POSITIVE_SENTIMENT}
name={SharedEventName.SENTIMENT_SUBMITTED}
events={[BrowserEvent.onClick]}
section={analyticsSection}
>
{/* <PositiveSentimentIcon
selected={isSentimentSelected(Sentiment.POSITIVE)}
onClick={() => {
setSelectedSentiment(Sentiment.POSITIVE)
}}
/> */}
</TraceEvent>
<TraceEvent
element={DocsSentiment.NEUTRAL_SENTIMENT}
name={SharedEventName.SENTIMENT_SUBMITTED}
events={[BrowserEvent.onClick]}
section={analyticsSection}
>
{/* <NeutralSentimentIcon
selected={isSentimentSelected(Sentiment.NEUTRAL)}
onClick={() => {
setSelectedSentiment(Sentiment.NEUTRAL)
}}
/> */}
</TraceEvent>
<TraceEvent
element={DocsSentiment.NEGATIVE_SENTIMENT}
name={SharedEventName.SENTIMENT_SUBMITTED}
events={[BrowserEvent.onClick]}
section={analyticsSection}
>
{/* <NegativeSentimentIcon
selected={isSentimentSelected(Sentiment.NEGATIVE)}
onClick={() => {
setSelectedSentiment(Sentiment.NEGATIVE)
}}
/> */}
</TraceEvent>
<div className="flex flex-row space-x-1">
<TraceEvent
element={DocsSentiment.POSITIVE_SENTIMENT}
name={SharedEventName.SENTIMENT_SUBMITTED}
events={[BrowserEvent.onClick]}
section={analyticsSection}
>
<button
onClick={() => {
setSelectedSentiment(Sentiment.POSITIVE)
}}
className={cn('group/happy', {
selected: isSentimentSelected(Sentiment.POSITIVE),
})}
>
<Happy className="h-5 w-5 group/happy" />
</button>
</TraceEvent>
<TraceEvent
element={DocsSentiment.NEUTRAL_SENTIMENT}
name={SharedEventName.SENTIMENT_SUBMITTED}
events={[BrowserEvent.onClick]}
section={analyticsSection}
>
<button
onClick={() => {
setSelectedSentiment(Sentiment.NEUTRAL)
}}
className={cn('group/neutral', {
selected: isSentimentSelected(Sentiment.NEUTRAL),
})}
>
<Neutral className="h-5 w-5" />
</button>
</TraceEvent>
<TraceEvent
element={DocsSentiment.NEGATIVE_SENTIMENT}
name={SharedEventName.SENTIMENT_SUBMITTED}
events={[BrowserEvent.onClick]}
section={analyticsSection}
>
<button
onClick={() => {
setSelectedSentiment(Sentiment.NEGATIVE)
}}
className={cn('group/sad', {
selected: isSentimentSelected(Sentiment.NEGATIVE),
})}
>
<Sad className="h-5 w-5" />
</button>
</TraceEvent>
</div>
</div>
)
}
43 changes: 35 additions & 8 deletions src/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,19 +47,22 @@
all: initial;
}
.theme-edit-this-page {
@apply text-light-neutral-3 dark:text-dark-neutral-3 !body-3;
svg {
@apply text-light-neutral-2 dark:text-dark-neutral-2 !button-label-3;
svg:not(.Toc__edit-icon) {
@apply !hidden;
}
}
.theme-doc-toc-desktop {
@apply !relative !top-auto;
}
.Toc__container {
@apply max-h-[calc(100vh-(theme(spacing.nav-h)+2rem))] overflow-y-auto sticky top-[calc(theme(spacing.nav-h)+1rem)];
@apply max-h-[calc(100vh-(theme(spacing.nav-h)+2rem))] overflow-y-auto sticky top-[calc(theme(spacing.nav-h)+1rem)] hidden md:block;
}
.theme-doc-toc-mobile {
@apply !hidden;
}
.table-of-contents__link {
@apply !text-light-neutral-2 dark:!text-dark-neutral-2 hover:underline !body-3;
@apply !text-light-neutral-2 dark:!text-dark-neutral-2 hover:!text-light-neutral-1 hover:dark:!text-dark-neutral-1 !body-3;
}
.table-of-contents__left-border {
@apply !border-0;
Expand All @@ -70,19 +73,43 @@
@apply border-y-0 border-r-0 border-l-2 border-solid border-l-light-surface-3 dark:border-l-dark-surface-3 !pl-4;
}
}
.pagination-nav {
@apply !flex !flex-col md:!flex-row !w-full !h-auto !gap-y-2 md:!gap-y-0 md:!gap-x-3 !mt-8;
}
.pagination-nav__link {
@apply !flex !flex-col !space-y-1 bg-light-accent-2 dark:bg-dark-accent-2 hover:bg-light-accent-2-hovered hover:dark:bg-dark-accent-2-hovered text-light-accent-1 dark:text-dark-accent-1 !rounded-lg !p-4 !border-0 !min-h-fit !h-auto;
@apply md:w-full !flex !flex-col !space-y-1 bg-light-accent-2 dark:bg-dark-accent-2 hover:bg-light-accent-2-hovered hover:dark:bg-dark-accent-2-hovered text-light-accent-1 !rounded-lg !p-4 !border-0 !min-h-fit !h-auto;
}
.pagination-nav__sublabel {
@apply text-light-accent-1 dark:text-dark-accent-1 !body-4;
@apply text-light-accent-1 !body-4 flex flex-row items-center w-fit;
}
.pagination-nav__label {
@apply !subheading-2 !text-light-accent-1 dark:!text-dark-accent-1;
@apply !subheading-2 !text-light-accent-1;
}
.pagination-nav__label::before,
.pagination-nav__label::after {
@apply !content-none;
}
.pagination-nav__link--next > .pagination-nav__sublabel::after {
@apply hidden md:inline-block w-4 h-4 bg-cover content-[""] bg-[url("/img/arrow-right.svg")] ml-2;
}
.pagination-nav__link--next > .pagination-nav__sublabel::before {
@apply md:hidden inline-block w-4 h-4 bg-cover content-[""] bg-[url("/img/arrow-right.svg")] mr-2;
}
.pagination-nav__link--prev > .pagination-nav__sublabel::before {
@apply inline-block w-4 h-4 bg-cover content-[""] bg-[url("/img/arrow-left.svg")] mr-2;
}
.pagination-nav__link--next > .pagination-nav__label {
@apply self-start md:self-end;
}
.pagination-nav__link--next > .pagination-nav__sublabel {
@apply md:self-end;
}
.pagination-nav__link--prev > .pagination-nav__sublabel {
@apply self-start;
}
.Sentiment__question {
@apply !mono-body-5;
@apply !mono-body-5 !text-light-neutral-1 dark:!text-dark-neutral-1;
}
.col.docItemCol_src-theme-DocItem-Layout-styles-module {
@apply !max-w-full md:max-w-[75%];
}
8 changes: 7 additions & 1 deletion src/theme/DocItem/Layout/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import DocItemContent from '@theme/DocItem/Content'
import DocBreadcrumbs from '@theme/DocBreadcrumbs'
import EditThisPage from '@theme/EditThisPage'
import styles from './styles.module.css'
import { Edit } from '../../../components/Icons'
/**
* Decide if the toc should be rendered, on mobile or desktop viewports
*/
Expand Down Expand Up @@ -54,7 +55,12 @@ export default function DocItemLayout({ children }) {
{docTOC.desktop}
</>
)}
{editUrl && <EditThisPage editUrl={editUrl} />}
{editUrl && (
<div className="flex flex-row space-x-1 items-center group/edit-icon">
<Edit className="Toc__edit-icon h-4 w-4" />
<EditThisPage editUrl={editUrl} />
</div>
)}
</div>
</div>
)
Expand Down
5 changes: 5 additions & 0 deletions static/img/arrow-left-dark.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions static/img/arrow-left.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 8294ed2

Please sign in to comment.