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

Team modals redesign #1675

Merged
merged 4 commits into from
Mar 4, 2024
Merged

Team modals redesign #1675

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
24a8af7
Team modals redesign
Shruti-Apte Feb 28, 2024
0a10571
updated some styles
Shruti-Apte Feb 28, 2024
fe916be
Merge branch 'develop' into team_modals_redesign
Shruti-Apte Feb 28, 2024
eb9554f
Merge branch 'develop' into team_modals_redesign
Shruti-Apte Feb 29, 2024
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
5 changes: 5 additions & 0 deletions app/javascript/src/StyledComponents/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ const TERNARY_DISABLED = "bg-transparent text-miru-dark-purple-200 border-0";
const DASHED =
"bg-white rounded border border-dashed border-miru-dark-purple-200 text-center text-base font-bold tracking-widest text-miru-dark-purple-200";

const DELETE = "bg-miru-red-400 hover:bg-miru-red-200 text-white";

const SMALL = "px-5/100 py-1vh text-xs font-bold leading-4";
const MEDIUM = "px-10/100 py-1vh text-base font-bold leading-5";
const LARGE = "px-15/100 py-1vh text-xl font-bold leading-7";
Expand All @@ -47,6 +49,7 @@ export const BUTTON_STYLES = {
secondary: "secondary",
ternary: "ternary",
dashed: "dashed",
delete: "delete",
calendarCell: "calendarCell",
};
const SIZES = { small: "small", medium: "medium", large: "large" };
Expand Down Expand Up @@ -80,6 +83,8 @@ const Button = ({

style == BUTTON_STYLES.dashed && !disabled && DASHED,

style == BUTTON_STYLES.delete && !disabled && DELETE,

style == BUTTON_STYLES.calendarCell && Calendar_Cell,

size == SIZES.small && SMALL,
Expand Down
5 changes: 2 additions & 3 deletions app/javascript/src/common/CustomRadio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@ import React from "react";

import classnames from "classnames";

const DEFAULT_STYLE_WRAPPER =
"flex items-center cursor-pointer lg:hover:bg-miru-gray-100";
const DEFAULT_STYLE_WRAPPER = "flex items-center cursor-pointer";

const DEFAULT_STYLE_LABEL =
"text-sm text-miru-dark-purple-1000 font-normal leading-5 lg:ml-4";
"text-sm text-miru-dark-purple-1000 font-normal leading-5";
const DEFAULT_STYLE_INPUT = "hidden w-3 h-3 custom__radio";
const DEFAULT_STYLE_RADIO_ICON =
"w-3 h-3 inline-block mr-2 rounded-full border border-miru-han-purple-1000";
Expand Down
272 changes: 125 additions & 147 deletions app/javascript/src/components/Team/modals/AddEditMember.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import React, { useState, useRef } from "react";

import { Formik, Form, Field, FormikProps } from "formik";
import { Formik, Form, FormikProps } from "formik";
import { useOutsideClick, useKeypress } from "helpers";
import { XIcon } from "miruIcons";
import { Modal } from "StyledComponents";
import { Button, Modal } from "StyledComponents";
import * as Yup from "yup";

import teamApi from "apis/team";
import CustomRadioButton from "common/CustomRadio";
import { InputErrors, InputField } from "common/FormikFields";
import { TeamModalType } from "constants/index";
import { useList } from "context/TeamContext";
import { useUserContext } from "context/UserContext";
Expand Down Expand Up @@ -111,174 +113,150 @@ const EditClient = ({ user = {}, isEdit = false }: Props) => {
>
<div className="flex items-center justify-between">
<h6 className="text-base font-extrabold">{getLabel()}</h6>
<button type="button" onClick={handleCloseModal}>
<XIcon color="#CDD6DF" size={16} weight="bold" />
</button>
<Button style="ternary" onClick={handleCloseModal}>
<XIcon
className="text-miru-dark-purple-1000"
size={16}
weight="bold"
/>
</Button>
</div>
<Formik
initialValues={getInitialvalues(user)}
validationSchema={TeamMemberSchema}
onSubmit={handleSubmit}
>
{(props: FormikProps<FormValues>) => {
const { touched, errors, isValid, dirty } = props;
const {
touched,
errors,
isValid,
dirty,
values,
setFieldError,
setFieldValue,
} = props;

return (
<Form>
<div className="mt-4">
<div className="field">
<div className="field_with_errors">
<label className="form__label">Name</label>
</div>
<div className="flex">
<div className="mt-1 w-1/2">
<Field
name="firstName"
placeholder="First Name"
className={`form__input ${
errors.firstName &&
touched.firstName &&
"border-red-600 focus:border-red-600 focus:ring-red-600"
} `}
/>
<div className="block flex text-xs tracking-wider text-red-600">
{errors.firstName && touched.firstName && (
<div>{errors.firstName}</div>
)}
</div>
</div>
<div className="mt-1 ml-8 w-1/2">
<Field
name="lastName"
placeholder="Last Name"
className={`form__input ${
errors.lastName &&
touched.lastName &&
"border-red-600 focus:border-red-600 focus:ring-red-600"
} `}
/>
<div className="block flex text-xs tracking-wider text-red-600">
{errors.lastName && touched.lastName && (
<div className="ml-2">{errors.lastName}</div>
)}
</div>
</div>
</div>
<div className="mt-4 flex gap-4">
<div className="field w-1/2">
<InputField
hasError={errors.firstName && touched.firstName}
id="firstName"
label="First Name"
name="firstName"
setFieldError={setFieldError}
setFieldValue={setFieldValue}
type="text"
/>
<InputErrors
fieldErrors={errors.firstName}
fieldTouched={touched.firstName}
/>
</div>
</div>
<div className="mt-4">
<div className="field">
<div className="field_with_errors">
<label className="form__label">Email</label>
</div>
<div className="mt-1">
<Field
disabled={isEdit}
id="email"
name="email"
placeholder="Enter email ID"
className={`form__input disabled:opacity-50 ${
errors.email &&
touched.email &&
"border-red-600 focus:border-red-600 focus:ring-red-600"
} `}
/>
<div className="block text-xs tracking-wider text-red-600">
{errors.email && touched.email && (
<div>{errors.email}</div>
)}
</div>
</div>
<div className="field w-1/2">
<InputField
hasError={errors.lastName && touched.lastName}
id="lastName"
label="Last Name"
name="lastName"
setFieldError={setFieldError}
setFieldValue={setFieldValue}
type="text"
/>
<InputErrors
fieldErrors={errors.lastName}
fieldTouched={touched.lastName}
/>
</div>
</div>
<div className="mt-4">
<div className="field">
<label className="form__label block text-xs font-normal tracking-wider text-miru-dark-purple-1000">
Role
</label>
<div className="mt-1 flex">
<div className="space-XIcon-10 flex items-center">
<div className="flex items-center justify-between">
<Field
className="custom__radio"
id="role-1"
name="role"
type="radio"
value="admin"
/>
<label
className="ml-2 flex cursor-pointer items-center text-xl"
htmlFor="role-1"
>
<i className="custom__radio-text" />
<span className="text-sm">Admin</span>
</label>
</div>
<div className="ml-8 flex items-center">
<Field
className="custom__radio"
id="role-2"
name="role"
type="radio"
value="employee"
/>
<label
className="ml-2 flex cursor-pointer items-center text-xl"
htmlFor="role-2"
>
<i className="custom__radio-text" />
<span className="text-sm">Employee</span>
</label>
</div>
<div className="ml-8 flex items-center">
<Field
className="custom__radio"
id="role-3"
name="role"
type="radio"
value="book_keeper"
/>
<label
className="ml-2 flex cursor-pointer items-center text-xl"
htmlFor="role-3"
>
<i className="custom__radio-text" />
<span className="text-sm">Bookkeeper</span>
</label>
</div>
<div className="ml-8 flex items-center">
<Field
className="custom__radio"
id="role-3"
name="role"
type="radio"
value="client"
/>
<label
className="ml-2 flex cursor-pointer items-center text-xl"
htmlFor="role-3"
>
<i className="custom__radio-text" />
<span className="text-sm">Client</span>
</label>
</div>
</div>
</div>
<div className="field">
<InputField
autoFocus
hasError={errors.email && touched.email}
id="email"
label="Email"
name="email"
setFieldError={setFieldError}
setFieldValue={setFieldValue}
/>
<InputErrors
fieldErrors={errors.email}
fieldTouched={touched.email}
/>
</div>
<div className="field">
<label className="text-xs font-normal text-miru-dark-purple-1000">
Role
</label>
<div className="mt-2 flex items-center gap-6">
<CustomRadioButton
classNameLabel="font-medium text-sm text-miru-dark-purple-1000"
classNameWrapper="py-2 pr-2 rounded"
defaultCheck={values.role == "admin"}
groupName="role"
id="admin"
key="admin"
label="Admin"
value={values.role}
handleOnChange={() => {
setFieldValue("role", "admin", true);
}}
/>
<CustomRadioButton
classNameLabel="font-medium text-sm text-miru-dark-purple-1000"
classNameWrapper="py-2 pr-2 rounded"
defaultCheck={values.role == "employee"}
groupName="role"
id="employee"
key="employee"
label="Employee"
value={values.role}
handleOnChange={() => {
setFieldValue("role", "employee", true);
}}
/>
<CustomRadioButton
classNameLabel="font-medium text-sm text-miru-dark-purple-1000"
classNameWrapper="py-2 pr-2 rounded"
defaultCheck={values.role == "book_keeper"}
groupName="role"
id="book_keeper"
key="book_keeper"
label="Bookkeeper"
value={values.role}
handleOnChange={() => {
setFieldValue("role", "book_keeper", true);
}}
/>
<CustomRadioButton
classNameLabel="font-medium text-sm text-miru-dark-purple-1000"
classNameWrapper="py-2 pr-2 rounded"
defaultCheck={values.role == "client"}
groupName="role"
id="client"
key="client"
label="Client"
value={values.role}
handleOnChange={() => {
setFieldValue("role", "client", true);
}}
/>
</div>
</div>
<div className="actions mt-4">
<button
<div className="actions mt-6">
<Button
disabled={!(dirty && isValid)}
name="commit"
type="submit"
className={
!isValid || !dirty
? "focus:outline-none flex h-10 w-full justify-center rounded border border-transparent bg-miru-gray-1000 py-1 px-4 font-sans text-base font-medium tracking-widest text-miru-white-1000 shadow-sm"
? "focus:outline-none flex h-10 w-full justify-center rounded border border-transparent bg-miru-gray-1000 text-base font-medium tracking-widest text-miru-white-1000 shadow-sm"
: "form__input_submit"
}
>
{isEdit ? "SAVE CHANGES" : "SEND INVITE"}
</button>
</Button>
</div>
</Form>
);
Expand Down
14 changes: 9 additions & 5 deletions app/javascript/src/components/Team/modals/DeleteMember.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,16 @@ const DeleteMember = ({ user }) => {
setModalState(TeamModalType.NONE);
}}
>
<XIcon color="#CDD6DF" size={16} weight="bold" />
<XIcon
className="text-miru-dark-purple-1000"
size={16}
weight="bold"
/>
</Button>
</div>
<p className="my-8">
Are you sure you want to delete user <b> {user?.name}</b>? This action
cannot be reversed.
<p className="mt-4 mb-10">
Are you sure you want to delete user <b> {user?.name}</b>? <br />
This action cannot be reversed.
</p>
<div className="flex justify-between">
<Button
Expand All @@ -72,7 +76,7 @@ const DeleteMember = ({ user }) => {
<Button
className="ml-2 w-1/2"
size="medium"
style="primary"
style="delete"
onClick={() => deleteTeamMember()}
>
DELETE
Expand Down
1 change: 1 addition & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ module.exports = {
},
"miru-red": {
400: "#E04646",
200: "#EB5B5B",
},
"miru-white": {
1000: "#FFFFFF",
Expand Down
Loading