Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Modal CSS Styling refactor #387

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

Modal CSS Styling refactor #387

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b528720
feat(css): create agenda modal styling
Ariaspect Sep 19, 2023
c4347e5
feat(css): edit agenda modal styling
Ariaspect Sep 19, 2023
7bb1e4a
feat(css): ongoing agenda modal styling
Ariaspect Sep 19, 2023
801402a
feat(css): terminated agenda modal styling
Ariaspect Sep 19, 2023
15f501f
feat(css): admin agenda tags styling
Ariaspect Sep 19, 2023
98f22b4
feat(css): user table styling
Ariaspect Sep 19, 2023
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
164 changes: 67 additions & 97 deletions client/src/components/molecules/AdminAgendaTags.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,106 +1,76 @@
import { DownArrowIcon } from "@/assets";
import { BorderedBox, Box, Text } from "@/components/atoms";

import {
gap,
row,
center,
justify,
align,
text,
w,
h,
bg,
round,
padding,
border,
} from "@/styles";

export const AdminAgendaTags: React.FC = () => (
<Box w={270} h={28} gap={16} dir="row" justify="center">
<Box dir="row" w={122} h={28} gap={10} align="center">
<Text variant="body" color="black">
투표 결과
</Text>
<BorderedBox
borderColor="gray200"
bg="white"
w={65}
h={28}
justify="center"
borderSize={1}
padHorizontal={15}
round={5}
borderStyle="solid"
gap={99}
>
<Text color="gray600" variant="option1">
비공개
</Text>
</BorderedBox>
</Box>
<Box dir="row" w={122} h={28} gap={10} align="center">
<Text variant="body" color="black">
투표 상세
</Text>
<BorderedBox
borderColor="gray200"
bg="white"
w={65}
h={28}
justify="center"
borderSize={1}
padHorizontal={15}
round={5}
gap={99}
borderStyle="solid"
>
<Text color="gray600" variant="option1">
무기명
</Text>
</BorderedBox>
</Box>
</Box>
<div css={[row, justify.center, gap(16)]}>
<div css={[row, align.center, gap(10)]}>
<p css={[text.body, text.black]}>투표 결과</p>
<div css={[center, bg.white, border.gray200, round.md, w(65), h(28)]}>
<p css={[text.option1, text.gray600]}>비공개</p>
</div>
</div>
<div css={[row, align.center, gap(10)]}>
<p css={[text.body, text.black]}>투표 상세</p>
<div css={[center, bg.white, border.gray200, round.md, w(65), h(28)]}>
<p css={[text.option1, text.gray600]}>무기명</p>
</div>
</div>
</div>
);

export const AdminAgendaTagsSelect: React.FC = () => (
<Box w={270} h={28} justify="space-between" dir="row">
<Box dir="row" w={130} h={28} gap={8} align="center">
<Text variant="body" color="black">
투표 결과
</Text>
<BorderedBox
borderColor="gray200"
bg="white"
w={75}
h={28}
justify="space-between"
borderSize={1}
padHorizontal={12}
padVertical={7}
round={5}
borderStyle="solid"
dir="row"
<div css={[row, justify.between]}>
<div css={[row, align.center, gap(8)]}>
<p css={[text.body, text.black]}>투표 결과</p>
<div
css={[
row,
justify.between,
align.center,
bg.white,
border.gray200,
round.md,
w(75),
h(28),
padding.horizontal(12),
]}
>
<Text color="gray600" variant="option1">
비공개
</Text>

<Box padVertical={7}>
<DownArrowIcon />
</Box>
</BorderedBox>
</Box>
<Box dir="row" w={130} h={28} gap={8} align="center">
<Text variant="body" color="black">
투표 상세
</Text>
<BorderedBox
borderColor="gray200"
bg="white"
w={75}
h={28}
justify="space-between"
borderSize={1}
padHorizontal={12}
padVertical={7}
round={5}
borderStyle="solid"
dir="row"
<p css={[text.option1, text.gray600]}>비공개</p>
<DownArrowIcon />
</div>
</div>
<div css={[row, align.center, gap(8)]}>
<p css={[text.body, text.black]}>투표 상세</p>
<div
css={[
row,
justify.between,
align.center,
bg.white,
border.gray200,
round.md,
w(75),
h(28),
padding.horizontal(12),
]}
>
<Text color="gray600" variant="option1">
무기명
</Text>

<Box padVertical={7}>
<DownArrowIcon />
</Box>
</BorderedBox>
</Box>
</Box>
<p css={[text.option1, text.gray600]}>무기명</p>
<DownArrowIcon />
</div>
</div>
</div>
);
123 changes: 64 additions & 59 deletions client/src/components/organisms/CreateAgendaModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,7 @@
import React, { useEffect, useMemo, useState } from "react";
import { Link } from "react-router-dom";

import {
Box,
Button,
SelectTagBox,
SelectTemplateBox,
Text,
} from "@/components/atoms";
import { Button, SelectTagBox, SelectTemplateBox } from "@/components/atoms";
import {
AdminAgendaTagsSelect,
Modal,
Expand All @@ -16,6 +10,19 @@ import {
import { useAdminAgenda } from "@/services/admin-agenda";
import { useAgendaTemplate } from "@/services/agenda-template";
import { useAdminUser } from "@/services/admin-user";

import {
gap,
row,
column,
justify,
text,
w,
bg,
round,
padding,
} from "@/styles";

import { UserTable } from "./UserTable";

export const CreateAgendaModal: React.FC = () => {
Expand Down Expand Up @@ -112,24 +119,24 @@ export const CreateAgendaModal: React.FC = () => {

return (
<Modal title="투표 생성하기">
<Box w={630} justify="space-between" dir="row">
<Box w={300} gap={20}>
<Box gap={10}>
<ModalInner
title="템플릿 선택"
buttonOnClick={() => applyTemplate(template)}
buttonText="템플릿 적용"
<div css={[row, justify.between, w(630)]}>
<div css={[column, gap(20), w(300)]}>
<ModalInner
title="템플릿 선택"
buttonOnClick={() => applyTemplate(template)}
buttonText="템플릿 적용"
>
<SelectTemplateBox
width={300}
height={38}
onChange={(templateId: number) => {
setTemplate(templateId);
}}
>
<SelectTemplateBox
width={300}
height={38}
onChange={(templateId: number) => {
setTemplate(templateId);
}}
>
템플릿을 선택하세요
</SelectTemplateBox>
</ModalInner>
템플릿을 선택하세요
</SelectTemplateBox>
</ModalInner>
<div css={[column, gap(10)]}>
<ModalInner title="투표 제목" required>
<ModalInner.InputBox onChange={onChangeTitle} value={title} />
</ModalInner>
Expand All @@ -145,27 +152,27 @@ export const CreateAgendaModal: React.FC = () => {
value={resolution}
/>
</ModalInner>
</div>

<ModalInner title="투표 항목" count={choices.length} required>
<ModalInner.AddVoteOptionArea
onClick={onChangeChoice}
onSubmit={addChoice}
value={newchoice}
>
{choices.map(opt => (
<ModalInner.VoteChoice
key={opt}
onClick={() => deleteChoice(opt)}
>
{opt}
</ModalInner.VoteChoice>
))}
</ModalInner.AddVoteOptionArea>
</ModalInner>
</Box>
</Box>
<ModalInner title="투표 항목" count={choices.length} required>
<ModalInner.AddVoteOptionArea
onClick={onChangeChoice}
onSubmit={addChoice}
value={newchoice}
>
{choices.map(opt => (
<ModalInner.VoteChoice
key={opt}
onClick={() => deleteChoice(opt)}
>
{opt}
</ModalInner.VoteChoice>
))}
</ModalInner.AddVoteOptionArea>
</ModalInner>
</div>

<Box w={300} gap={20}>
<div css={[column, gap(20), w(300)]}>
<ModalInner
title="태그 선택"
buttonText="선택된 태그 적용하기"
Expand All @@ -181,32 +188,30 @@ export const CreateAgendaModal: React.FC = () => {
filterBy="tag"
/>
</ModalInner>
<Box
w={300}
h={106}
gap={10}
align="center"
justify="center"
bg="blue100"
<div
css={[
column,
bg.blue100,
gap(10),
round.md,
padding.horizontal(15),
padding.vertical(13),
]}
>
<Box dir="row" w={270} h={28} justify="space-between">
<AdminAgendaTagsSelect />
</Box>
<AdminAgendaTagsSelect />
<Link
to={validated ? ".." : "#"}
relative="path"
replace
style={{ textDecoration: "none" }}
>
<Button w={270} h={38} onClick={onSubmit} disabled={!validated}>
<Text variant="boldtitle3" color="blue600">
투표 생성하기
</Text>
<p css={[text.boldtitle3, text.blue600]}>투표 생성하기</p>
</Button>
</Link>
</Box>
</Box>
</Box>
</div>
</div>
</div>
</Modal>
);
};
Loading
Loading