fix: bug fixes and ui improvement (#2674)

* chore: peekoverview edit permission updated

* chore: tab index added in create project modal

* chore: project card improvement

* style: avatar component improvement

* chore: create issue modal improvement

* style: global style sidebar border variable name fix

packages/ui/src/avatar/avatar-group.tsx

@@ -57,7 +57,10 @@ export const AvatarGroup: React.FC<Props> = (props) => {
   return (
     <div className={`flex ${sizeInfo.spacing}`}>
       {avatarsWithUpdatedProps.map((avatar, index) => (
-        <div key={index} className="ring-1 ring-custom-border-200 rounded-full">
+        <div
+          key={index}
+          className="ring-1 ring-custom-background-100 rounded-full"
+        >
           {avatar}
         </div>
       ))}
@@ -69,7 +72,7 @@ export const AvatarGroup: React.FC<Props> = (props) => {
           <div
             className={`${
               !isAValidNumber(size) ? sizeInfo.avatarSize : ""
-            } ring-1 ring-custom-border-200 bg-custom-primary-500 text-white rounded-full grid place-items-center text-[9px]`}
+            } ring-1 ring-custom-background-100 bg-custom-primary-10 text-custom-primary-100 rounded-full grid place-items-center text-[9px]`}
             style={
               isAValidNumber(size)
                 ? {

space/styles/globals.css

@@ -199,9 +199,9 @@
     --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
 
     --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
+    --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
   }
 }
 

web/components/issues/issue-peek-overview/issue-detail.tsx

@@ -32,7 +32,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
   // store
   const { user: userStore } = useMobxStore();
   const { currentProjectRole } = userStore;
-  const isAllowed = [5, 10].includes(currentProjectRole || 0);
+  const isAllowed = [15, 20].includes(currentProjectRole || 0);
   // states
   const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
   const [characterLimit, setCharacterLimit] = useState(false);

web/components/issues/modal.tsx

@@ -324,7 +324,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
                 leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                 leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
               >
-                <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-3xl">
+                <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full mx-4 sm:max-w-4xl">
                   <IssueForm
                     handleFormSubmit={handleFormSubmit}
                     initialData={data ?? prePopulateData}

web/components/project/card.tsx

@@ -211,7 +211,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
               <div className="flex items-center">
                 <Button
                   variant="link-primary"
-                  className="!p-0"
+                  className="!p-0 font-semibold"
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();

web/components/project/create-project-modal.tsx

@@ -261,6 +261,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
                               name="name"
                               type="text"
                               value={value}
+                              tabIndex={1}
                               onChange={handleNameChange(onChange)}
                               hasError={Boolean(errors.name)}
                               placeholder="Project Title"
@@ -293,6 +294,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
                               name="identifier"
                               type="text"
                               value={value}
+                              tabIndex={2}
                               onChange={handleIdentifierChange(onChange)}
                               hasError={Boolean(errors.identifier)}
                               placeholder="Identifier"
@@ -311,6 +313,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
                               id="description"
                               name="description"
                               value={value}
+                              tabIndex={3}
                               placeholder="Description..."
                               onChange={onChange}
                               className="text-sm !h-24"
@@ -322,7 +325,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
                     </div>
 
                     <div className="flex items-center gap-2 flex-wrap">
-                      <div className="flex-shrink-0">
+                      <div className="flex-shrink-0" tabIndex={4}>
                         <Controller
                           name="network"
                           control={control}
@@ -359,7 +362,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
                           )}
                         />
                       </div>
-                      <div className="flex-shrink-0">
+                      <div className="flex-shrink-0" tabIndex={5}>
                         <Controller
                           name="project_lead_member"
                           control={control}
@@ -377,10 +380,10 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
                   </div>
 
                   <div className="flex justify-end gap-2 pt-5">
-                    <Button variant="neutral-primary" onClick={handleClose}>
+                    <Button variant="neutral-primary" onClick={handleClose} tabIndex={6}>
                       Cancel
                     </Button>
-                    <Button variant="primary" type="submit" size="sm" loading={isSubmitting}>
+                    <Button variant="primary" type="submit" size="sm" loading={isSubmitting} tabIndex={7}>
                       {isSubmitting ? "Creating..." : "Create Project"}
                     </Button>
                   </div>

web/styles/globals.css

@@ -211,9 +211,9 @@
     --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
 
     --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
+    --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
   }
 }