Skip to content
This repository was archived by the owner on Sep 7, 2023. It is now read-only.

adjusting ui components as per wordcel requirements #2

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

adjusting ui components as per wordcel requirements #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9846963
added wordcel notification component
vjgpt Aug 31, 2022
bbe85b6
adjusting ui components as per wordcel requirements
vjgpt Sep 3, 2022
a179759
changing hardcoded styles to fit designs in wordcel dapp ui
vjgpt Sep 5, 2022
10d1c27
Changed buttons and converted rem units to em
vjgpt Sep 22, 2022
d15a0ac
updating notification modal ui design
vjgpt Sep 28, 2022
02d5386
updated notification buttons with text
vjgpt Oct 4, 2022
252b844
fix: text size for sign and error messages
vjgpt Oct 18, 2022
a72ab12
fix: styles of message
vjgpt Nov 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/dialect-react-ui/.npmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@wordcel:registry=https://npm.pkg.github.com
2 changes: 1 addition & 1 deletion packages/dialect-react-ui/components/Chat/screens/CreateThreadPage/CreateThread.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ export default function CreateThread({
<Header.Icons />
</Header>

<div className="dt-flex-1 dt-pb-8 dt-max-w-sm dt-min-w-[24rem] dt-m-auto dt-flex dt-flex-col dt-px-2">
<div className="dt-flex-1 dt-pb-8 dt-max-w-sm dt-min-w-[24em] dt-m-auto dt-flex dt-flex-col dt-px-2">
<H1
className={clsx(
textStyles.h1,
Expand Down
2 changes: 1 addition & 1 deletion packages/dialect-react-ui/components/Chat/screens/Main/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const Main = () => {
className={clsx(
'dt-flex dt-flex-1 dt-flex-col dt-border-neutral-600 dt-overflow-hidden dt-w-full',
{
'md:dt-max-w-[22rem] md:dt-border-r md:dt-flex': inbox,
'md:dt-max-w-[22em] md:dt-border-r md:dt-flex': inbox,
'dt-hidden': hideList,
}
)}
Expand Down
14 changes: 5 additions & 9 deletions packages/dialect-react-ui/components/Icon/BackArrow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,15 @@ import type { SVGProps } from 'react';

const SvgBackArrow = (props: SVGProps<SVGSVGElement>) => (
<svg
width={20}
height={20}
width={15}
height={15}
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M18 10H2m0 0 6-6m-6 6 6 6"
stroke="currentColor"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M14.5 6.625L3.85125 6.625L8.7425 1.73375L7.5 0.5L0.5 7.5L7.5 14.5L8.73375 13.2663L3.85125 8.375H14.5V6.625Z"
fill="#E2E8EF"/>
</svg>
);

Expand Down
20 changes: 8 additions & 12 deletions packages/dialect-react-ui/components/Icon/Bell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,18 @@ import type { SVGProps } from 'react';

const SvgBell = (props: SVGProps<SVGSVGElement>) => (
<svg
width={20}
height={20}
width={22}
height={22}
fill="none"
viewBox="0 0 20 20"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M7.5 14.167v-.75a.75.75 0 0 0-.75.75h.75Zm5 0h.75a.75.75 0 0 0-.75-.75v.75Zm-5 .75h5v-1.5h-5v1.5Zm4.25-.75V15h1.5v-.833h-1.5ZM8.25 15v-.833h-1.5V15h1.5ZM10 16.75A1.75 1.75 0 0 1 8.25 15h-1.5A3.25 3.25 0 0 0 10 18.25v-1.5ZM11.75 15A1.75 1.75 0 0 1 10 16.75v1.5A3.25 3.25 0 0 0 13.25 15h-1.5Z"
fill="currentColor"
/>
<path
d="m3.577 12.256-.53-.53.53.53Zm.426-.426.53.53-.53-.53Zm11.994 0 .53-.53-.53.53Zm.426.426.53-.53-.53.53ZM10 2.5v.75-.75Zm5.833 10.917H4.167v1.5h11.666v-1.5Zm-11.75-.084v-.488h-1.5v.488h1.5Zm.025-.547.425-.425-1.06-1.061-.426.425 1.06 1.061Zm.809-1.35V8.332h-1.5v3.102h1.5Zm10.166-3.103v3.102h1.5V8.333h-1.5Zm.383 4.027.426.426 1.06-1.06-.425-.426-1.06 1.06Zm.45.485v.488h1.5v-.488h-1.5Zm-.024-.059a.083.083 0 0 1 .025.06h1.5c0-.42-.167-.823-.464-1.12l-1.06 1.06Zm-.809-1.35c0 .346.138.68.383.925l1.061-1.061a.192.192 0 0 1 .056.135h-1.5Zm1.5-3.103A6.583 6.583 0 0 0 10 1.75v1.5a5.083 5.083 0 0 1 5.083 5.083h1.5Zm-11.666 0A5.083 5.083 0 0 1 10 3.25v-1.5a6.583 6.583 0 0 0-6.583 6.583h1.5Zm-.384 4.027c.246-.245.384-.578.384-.925h-1.5c0-.05.02-.1.056-.135l1.06 1.06Zm-.45.485c0-.022.01-.043.025-.059l-1.06-1.06c-.298.296-.465.7-.465 1.12h1.5Zm.084.572a.083.083 0 0 1-.084-.084h-1.5c0 .875.71 1.584 1.584 1.584v-1.5Zm11.666 1.5c.875 0 1.584-.71 1.584-1.584h-1.5a.083.083 0 0 1-.084.084v1.5Z"
fill="currentColor"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16.5 14.4375V9.85417C16.5 7.04 15.0058 4.68417 12.375 4.06083V3.4375C12.375 2.67667 11.7608 2.0625 11 2.0625C10.2391 2.0625 9.62496 2.67667 9.62496 3.4375V4.06083C7.00329 4.68417 5.49996 7.03083 5.49996 9.85417L5.49996 14.4375L3.66663 16.2708V17.1875H18.3333V16.2708L16.5 14.4375ZM11 19.9375C12.0083 19.9375 12.8333 19.1125 12.8333 18.1042H9.16663C9.16663 19.1125 9.99163 19.9375 11 19.9375ZM7.33329 15.3542H14.6666V9.85417C14.6666 7.58083 13.2825 5.72917 11 5.72917C8.71746 5.72917 7.33329 7.58083 7.33329 9.85417L7.33329 15.3542Z"
fill="#CBD5E1"/>
</svg>
);

Expand Down
17 changes: 17 additions & 0 deletions packages/dialect-react-ui/components/Icon/Check.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import type { SVGProps } from 'react';

const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
<svg
width={9}
height={8}
fill="none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 9 8"
{...props}
>
<path d="M6.97004 0.969986C7.1109 0.835875 7.29836 0.761733 7.49285 0.763205C7.68735 0.764677 7.87366 0.841647 8.01248 0.977874C8.1513 1.1141 8.23178 1.29893 8.23692 1.49336C8.24206 1.68779 8.17146 1.87661 8.04004 2.01999L4.05004 7.00999C3.98143 7.08389 3.89862 7.14319 3.80657 7.18435C3.71452 7.22552 3.61511 7.2477 3.51429 7.24956C3.41347 7.25143 3.31331 7.23295 3.21979 7.19522C3.12628 7.15749 3.04133 7.10129 2.97004 7.02999L0.324036 4.38399C0.250349 4.31532 0.191247 4.23252 0.150255 4.14052C0.109263 4.04853 0.0872207 3.94921 0.0854439 3.84851C0.0836671 3.74781 0.102192 3.64778 0.139913 3.55439C0.177634 3.461 0.233779 3.37617 0.304997 3.30495C0.376216 3.23373 0.46105 3.17758 0.554438 3.13986C0.647826 3.10214 0.747855 3.08362 0.848558 3.08539C0.949261 3.08717 1.04857 3.10921 1.14057 3.15021C1.23257 3.1912 1.31537 3.2503 1.38404 3.32399L3.47804 5.41699L6.95104 0.991987C6.95729 0.984288 6.96397 0.976943 6.97104 0.969986H6.97004Z"
fill="#64758B"/>
</svg>
);

export default SvgComponent;
12 changes: 6 additions & 6 deletions packages/dialect-react-ui/components/Icon/Gear.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@ import type { SVGProps } from 'react';

const SvgGear = (props: SVGProps<SVGSVGElement>) => (
<svg
width={20}
height={20}
width={21}
height={21}
fill="none"
viewBox="0 0 21 21"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M9.07 20h1.86c.764 0 1.363-.47 1.538-1.198l.377-1.631.24-.093 1.418.876c.644.405 1.4.304 1.933-.24l1.29-1.29c.552-.544.644-1.3.239-1.935l-.875-1.41.083-.231 1.63-.378A1.553 1.553 0 0 0 20 10.93V9.116c0-.756-.47-1.355-1.197-1.539l-1.611-.387-.093-.24.875-1.41c.405-.636.304-1.382-.24-1.945l-1.288-1.29c-.534-.534-1.29-.636-1.925-.24l-1.418.867-.258-.102-.377-1.63C12.293.47 11.694 0 10.93 0H9.07c-.774 0-1.363.47-1.538 1.198L7.155 2.83l-.258.102-1.418-.866c-.645-.397-1.4-.295-1.934.24l-1.289 1.29c-.543.562-.645 1.308-.24 1.944l.885 1.41-.102.24-1.602.387C.46 7.76 0 8.359 0 9.116v1.815c0 .756.47 1.355 1.197 1.539l1.62.378.093.23-.884 1.41c-.405.636-.304 1.392.24 1.936l1.288 1.29c.544.544 1.299.645 1.934.24l1.418-.876.249.093.377 1.63C7.707 19.53 8.296 20 9.07 20Zm.221-1.668c-.157 0-.23-.074-.258-.212l-.543-2.268a5.263 5.263 0 0 1-1.593-.654l-1.99 1.226c-.11.074-.22.064-.34-.046l-.976-.977c-.101-.101-.11-.212-.027-.332l1.224-1.99a5.756 5.756 0 0 1-.644-1.568l-2.275-.543c-.138-.028-.202-.102-.202-.258V9.327c0-.166.064-.23.202-.267l2.275-.535A6.11 6.11 0 0 1 4.77 6.94L3.554 4.96c-.083-.13-.083-.24.028-.35l.976-.968c.12-.102.212-.12.35-.047l1.98 1.208a6.393 6.393 0 0 1 1.602-.655l.543-2.267c.028-.138.101-.212.258-.212h1.418c.157 0 .23.065.249.212l.552 2.286a5.94 5.94 0 0 1 1.593.645l1.98-1.207c.138-.074.23-.065.34.046l.986.968c.11.1.11.211.027.34L15.221 6.94c.221.396.497.968.635 1.585l2.266.535c.147.037.211.101.211.267v1.383c0 .156-.073.23-.211.258l-2.275.543a6.055 6.055 0 0 1-.635 1.567l1.215 1.991c.074.12.074.23-.027.323l-.976.986c-.12.11-.23.12-.341.046l-1.99-1.226a5.02 5.02 0 0 1-1.583.654l-.552 2.268c-.019.147-.092.212-.249.212H9.291Zm.709-4.83c1.915 0 3.49-1.576 3.49-3.502 0-1.908-1.575-3.484-3.49-3.484-1.915 0-3.5 1.576-3.5 3.484a3.511 3.511 0 0 0 3.5 3.502Zm0-1.576A1.929 1.929 0 0 1 8.085 10c0-1.041.865-1.899 1.915-1.899 1.031 0 1.888.858 1.888 1.899 0 1.05-.857 1.926-1.888 1.926Z"
fill="currentColor"
/>
<path fillRule="evenodd"
clipRule="evenodd" d="M17.0644 10.5C17.0644 10.7975 17.0382 11.0775 17.0032 11.3575L18.8494 12.8013C19.0157 12.9325 19.0594 13.1688 18.9544 13.3612L17.2044 16.3888C17.1257 16.5287 16.9769 16.6075 16.8282 16.6075C16.7757 16.6075 16.7232 16.5988 16.6707 16.5813L14.4919 15.7063C14.0369 16.0475 13.5469 16.345 13.0132 16.5638L12.6807 18.8825C12.6544 19.0925 12.4707 19.25 12.2519 19.25H8.75193C8.53318 19.25 8.34943 19.0925 8.32318 18.8825L7.99068 16.5638C7.45693 16.345 6.96693 16.0562 6.51193 15.7063L4.33318 16.5813C4.28943 16.5988 4.23693 16.6075 4.18443 16.6075C4.02693 16.6075 3.87818 16.5287 3.79943 16.3888L2.04943 13.3612C1.94443 13.1688 1.98818 12.9325 2.15443 12.8013L4.00068 11.3575C3.96568 11.0775 3.93943 10.7887 3.93943 10.5C3.93943 10.2113 3.96568 9.9225 4.00068 9.6425L2.15443 8.19875C1.98818 8.0675 1.93568 7.83125 2.04943 7.63875L3.79943 4.61125C3.87818 4.47125 4.02693 4.3925 4.17568 4.3925C4.22818 4.3925 4.28068 4.40125 4.33318 4.41875L6.51193 5.29375C6.96693 4.9525 7.45693 4.655 7.99068 4.43625L8.32318 2.1175C8.34943 1.9075 8.53318 1.75 8.75193 1.75L12.2519 1.75C12.4707 1.75 12.6544 1.9075 12.6807 2.1175L13.0132 4.43625C13.5469 4.655 14.0369 4.94375 14.4919 5.29375L16.6707 4.41875C16.7144 4.40125 16.7669 4.3925 16.8194 4.3925C16.9769 4.3925 17.1257 4.47125 17.2044 4.61125L18.9544 7.63875C19.0594 7.83125 19.0157 8.0675 18.8494 8.19875L17.0032 9.6425C17.0382 9.9225 17.0644 10.2025 17.0644 10.5ZM15.3144 10.5C15.3144 10.3162 15.3057 10.1325 15.2707 9.86125L15.1482 8.8725L15.9269 8.26L16.8632 7.51625L16.2507 6.4575L15.1394 6.90375L14.2119 7.28L13.4157 6.6675C13.0657 6.405 12.7157 6.20375 12.3394 6.04625L11.4119 5.67L11.2719 4.68125L11.1057 3.5H9.88943L9.71443 4.68125L9.57443 5.67L8.64693 6.04625C8.28818 6.195 7.92943 6.405 7.55318 6.685L6.76568 7.28L5.85568 6.9125L4.74443 6.46625L4.13193 7.525L5.07693 8.26L5.85568 8.8725L5.73318 9.86125C5.70693 10.1237 5.68943 10.325 5.68943 10.5C5.68943 10.675 5.70693 10.8763 5.73318 11.1475L5.85568 12.1362L5.07693 12.7487L4.13193 13.4837L4.74443 14.5425L5.85568 14.0962L6.78318 13.72L7.57943 14.3325C7.92943 14.595 8.27943 14.7963 8.65568 14.9538L9.58318 15.33L9.72318 16.3187L9.88943 17.5H11.1144L11.2894 16.3187L11.4294 15.33L12.3569 14.9538C12.7157 14.805 13.0744 14.595 13.4507 14.315L14.2382 13.72L15.1482 14.0875L16.2594 14.5337L16.8719 13.475L15.9269 12.74L15.1482 12.1275L15.2707 11.1388C15.2969 10.8762 15.3144 10.6838 15.3144 10.5ZM10.5019 7C8.56818 7 7.00193 8.56625 7.00193 10.5C7.00193 12.4338 8.56818 14 10.5019 14C12.4357 14 14.0019 12.4338 14.0019 10.5C14.0019 8.56625 12.4357 7 10.5019 7ZM8.75193 10.5C8.75193 11.4625 9.53943 12.25 10.5019 12.25C11.4644 12.25 12.2519 11.4625 12.2519 10.5C12.2519 9.5375 11.4644 8.75 10.5019 8.75C9.53943 8.75 8.75193 9.5375 8.75193 10.5Z"
fill="#CBD5E1"/>
</svg>
);

Expand Down
21 changes: 6 additions & 15 deletions packages/dialect-react-ui/components/Icon/NoNotifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,16 @@ import type { SVGProps } from 'react';

const SvgNoNotifications = (props: SVGProps<SVGSVGElement>) => (
<svg
width={38}
height={39}
width={93}
height={93}
viewBox="0 0 93 93"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g opacity={0.6}>
<path
d="M14.25 27.624v-1a1 1 0 0 0-1 1h1Zm9.5 0h1a1 1 0 0 0-1-1v1Zm-9.5 1h9.5v-2h-9.5v2Zm8.5-1v1.583h2v-1.583h-2Zm-7.5 1.583v-1.583h-2v1.583h2Zm3.75 3.75a3.75 3.75 0 0 1-3.75-3.75h-2a5.75 5.75 0 0 0 5.75 5.75v-2Zm3.75-3.75a3.75 3.75 0 0 1-3.75 3.75v2a5.75 5.75 0 0 0 5.75-5.75h-2Z"
fill="currentColor"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M30.994 28.459a2.584 2.584 0 0 0 1.673-2.418v-.928c0-.685-.273-1.342-.757-1.827l-.809-.809a.061.061 0 0 1-.018-.043v-5.893c0-6.674-5.41-12.084-12.083-12.084a12.045 12.045 0 0 0-8.506 3.501l1.414 1.415A10.051 10.051 0 0 1 19 6.457c5.569 0 10.083 4.515 10.083 10.084v5.893c0 .547.217 1.071.604 1.458l.809.809c.11.109.17.257.17.412v.928a.583.583 0 0 1-.583.583h-.924l1.835 1.835ZM10.096 11.804a10.039 10.039 0 0 0-1.18 4.737v5.893a2.06 2.06 0 0 1-.603 1.458l-.7-.7.7.7-.809.809a.583.583 0 0 0-.17.412v.928c0 .322.26.583.583.583h17l2 2h-19a2.583 2.583 0 0 1-2.584-2.583v-.928c0-.685.272-1.342.757-1.827l.809-.809a.061.061 0 0 0 .018-.043v-5.893c0-2.269.625-4.391 1.712-6.205l1.467 1.467Z"
fill="currentColor"
/>
<path stroke="currentColor" strokeWidth={2} d="m.707 2 34 34" />
</g>
<circle cx="46.5" cy="46.5" r="46.5" fill="#F7FAFC"/>
<rect opacity="0.3" x="33.2143" y="34.875" width="26.5714" height="9.96428" rx="1.5" fill="#CBD5E1"/>
<rect x="33.2143" y="48.1607" width="26.5714" height="9.96428" rx="1.5" fill="#CBD5E1"/>
</svg>
);

Expand Down
18 changes: 8 additions & 10 deletions packages/dialect-react-ui/components/Icon/Trash.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,19 @@ import type { SVGProps } from 'react';

const SvgTrash = (props: SVGProps<SVGSVGElement>) => (
<svg
width={16}
height={16}
width={20}
height={20}
fill="none"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio='xMidYMid'
viewBox="0 0 24 24"
viewBox="0 0 20 20"
{...props}
>
<path
d="M4 7h16m-1 0-.867 12.142A2 2 0 0 1 16.138 21H7.862a2 2 0 0 1-1.995-1.858L5 7h14Zm-9 4v6-6Zm4 0v6-6Zm1-4V4a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v3h6Z"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12.0834 2.5L7.91669 2.5L7.08335 3.33333H4.16669V5H15.8334V3.33333L12.9167 3.33333L12.0834 2.5ZM13.3334 7.5V15.8333H6.66669L6.66669 7.5L13.3334 7.5ZM5.00002 5.83333H15V15.8333C15 16.75 14.25 17.5 13.3334 17.5H6.66669C5.75002 17.5 5.00002 16.75 5.00002 15.8333L5.00002 5.83333Z"
fill="#CBD5E1"/>
</svg>
);

Expand Down
16 changes: 16 additions & 0 deletions packages/dialect-react-ui/components/Icon/Triangle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import type { SVGProps } from 'react';

const TriangleIcon = (props: SVGProps<SVGSVGElement>) => (
<svg
width="25"
height="15"
viewBox="0 0 25 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path d="M12.5 0L24.1913 14.25H0.808657L12.5 0Z" fill="white"/>
</svg>
);

export default TriangleIcon;
2 changes: 2 additions & 0 deletions packages/dialect-react-ui/components/Icon/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,5 @@ export { default as X } from './X';
export { default as MultiarrowVertical } from './MultiarrowVertical';
export { default as Encrypted } from './Encrypted';
export { default as Unencrypted } from './Unencrypted';
export { default as Check } from './Check';
export { default as TriangleIcon } from './Triangle';
4 changes: 2 additions & 2 deletions packages/dialect-react-ui/components/Icon/source/back-arrow.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 2 additions & 3 deletions packages/dialect-react-ui/components/Icon/source/bell.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/dialect-react-ui/components/Icon/source/check.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading