🐛 Fix: Bad UI Issues in Profile Section (#1025)

* Removed Github Repository Links Section Signed-off-by: Vividh Pandey <[email protected]> * Fixed overlay of tribes section Signed-off-by: Vividh Pandey <[email protected]> * Fixed: pretext and input text to be on same y-axis Signed-off-by: Vividh Pandey <[email protected]> * Fixed default width of form components Signed-off-by: Vividh Pandey <[email protected]> * Fixed Github Repository Links Area also changed the type to text * Commented Validator temporarily * Update interfaces.ts * Update schema.ts * Update AboutFocusView.tsx * Update AboutView.tsx * Update schema.ts * Prettier ReRun Signed-off-by: Vividh Pandey <[email protected]> * Fixed Prepend Text for text inputs Signed-off-by: Vividh Pandey <[email protected]> * Fixed Prettier Checks Signed-off-by: Vividh Pandey <[email protected]> --------- Signed-off-by: Vividh Pandey <[email protected]>
stakwork · Dec 5, 2023 · 12bd3e4 · 12bd3e4
1 parent 5c0c13e
commit 12bd3e4
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 47 deletions.
diff --git a/frontend/app/src/components/form/inputs/MultiSelectInput.tsx b/frontend/app/src/components/form/inputs/MultiSelectInput.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { EuiIcon } from '@elastic/eui';
 import { MultiSelect } from '../../common';
@@ -12,7 +12,7 @@ interface styledProps {
 
 const ExtraText = styled.div`
   padding: 2px 10px 25px 10px;
-  max-width: calc(100% - 20px);
+  max-width: calc(100 % - 20px);
   word-break: break-all;
   font-size: 14px;
 `;
@@ -25,7 +25,7 @@ const E = styled.div<styledProps>`
   height: 100%;
   justify-content: center;
   align-items: center;
-  color: ${(p: any) => p.color && p.color.blue3};
+  color: ${(p: any) => p?.color && p.color.blue3};
   pointer-events: none;
   user-select: none;
 `;
@@ -46,9 +46,16 @@ export default function MultiSelectInput({
   if (error) labeltext = `${labeltext} (${error})`;
   const color = colors['light'];
 
+  const [isTop, setIsTop] = useState<boolean>(false);
+
   return (
     <>
-      <FieldEnv label={labeltext} color={color}>
+      <FieldEnv
+        color={color}
+        label={labeltext}
+        isTop={isTop || value?.length > 0}
+        isFill={value?.length > 0}
+      >
         <R>
           <MultiSelect
             selectStyle={{ border: 'none' }}
@@ -57,7 +64,9 @@ export default function MultiSelectInput({
             value={value}
             onChange={(e: any) => {
               handleChange(e);
+              setIsTop(true);
             }}
+            setIsTop={setIsTop}
           />
           {error && (
             <E color={color}>

diff --git a/frontend/app/src/components/form/inputs/TextInput.tsx b/frontend/app/src/components/form/inputs/TextInput.tsx
@@ -110,7 +110,7 @@ export default function TextInput({
               handleFocus(e);
               setActive(true);
             }}
-            prepend={prepend}
+            prepend={active ? prepend : ''}
             style={padStyle}
             isTextField={true}
           />

diff --git a/frontend/app/src/components/form/inputs/index.tsx b/frontend/app/src/components/form/inputs/index.tsx
@@ -104,7 +104,7 @@ export const FieldText = styled(EuiFieldText)<styledProps>`
     p.readOnly ? `${p.color.grayish.G60A}` : `${p.color.pureBlack}`} !important;
   box-shadow: none !important;
   height: ${(p: any) => (p?.isTextField ? '12px' : '')};
-  margin-top: ${(p: any) => (p?.isTextField ? '2px' : '')};
+  margin-top: ${(p: any) => (p?.isTextField ? '8px' : '')};
 
   .euiFormRow__labelWrapper .euiFormControlLayout--group {
     background-color: ${(p: any) => p?.color && p.color.pureWhite} !important;

diff --git a/frontend/app/src/components/form/inputs/widgets/interfaces.ts b/frontend/app/src/components/form/inputs/widgets/interfaces.ts
@@ -55,7 +55,6 @@ export interface Extras {
   github?: [{ [key: string]: string }];
   coding_languages?: [{ [key: string]: string }];
   tribes?: [{ [key: string]: string }];
-  repos?: [{ [key: string]: string }];
   lightning?: [{ [key: string]: string }];
   amboss?: [{ [key: string]: string }];
 }

diff --git a/frontend/app/src/components/form/schema.ts b/frontend/app/src/components/form/schema.ts
@@ -10,15 +10,6 @@ import { FormField } from './utils';
 
 const strValidator = Yup.string().trim().required('Required');
 const strValidatorNotRequired = Yup.string().trim();
-const repoStrValidator = Yup.string()
-  .trim()
-  .matches(/^[^/]+\/[^/]+$/, 'Incorrect format')
-  .required('Required');
-const repoArrayStrValidator = Yup.array().of(
-  Yup.object().shape({
-    value: repoStrValidator
-  })
-);
 const badgeObjectStrValidator = Yup.object().shape({
   value: strValidator
 });
@@ -434,16 +425,6 @@ export const aboutSchema: FormField[] = [
     prepend: 'https://github.com/',
     page: 1
   },
-  {
-    name: 'repos',
-    label: 'Github Repository Links',
-    widget: true,
-    type: 'creatablemultiselect',
-    options: [],
-    note: 'Enter in this format: ownerName/repoName, (e.g. stakwork/sphinx-tribes).',
-    validator: repoArrayStrValidator, // look for 1 slash
-    page: 1
-  },
   {
     name: 'lightning',
     label: 'Lightning address',

diff --git a/frontend/app/src/components/form/style.ts b/frontend/app/src/components/form/style.ts
@@ -15,7 +15,7 @@ export const Wrap = styled.div<WrapProps>`
   height: inherit;
   flex-direction: column;
   align-content: center;
-  min-width: 230px;
+  min-width: 600px;
 `;
 
 export const OrgWrap = styled.div<WrapProps>`

diff --git a/frontend/app/src/people/main/AboutFocusView.tsx b/frontend/app/src/people/main/AboutFocusView.tsx
@@ -93,7 +93,6 @@ const AboutFocusView = (props: FocusViewProps) => {
       // extras with multiple items
       initialValues.coding_languages = personInfo.extras?.coding_languages || [];
       initialValues.tribes = personInfo.extras?.tribes || [];
-      initialValues.repos = personInfo.extras?.repos || [];
       initialValues.lightning =
         (personInfo.extras?.lightning && personInfo.extras?.lightning[0]?.value) || '';
       initialValues.amboss =

diff --git a/frontend/app/src/people/widgetViews/AboutView.tsx b/frontend/app/src/people/widgetViews/AboutView.tsx
@@ -219,8 +219,7 @@ const Img = styled.div<ImageProps>`
 export const AboutView = observer((props: AboutViewProps) => {
   const history = useHistory();
   const { price_to_meet, extras, twitter_confirmed, owner_pubkey, owner_route_hint } = props;
-  const { twitter, github, coding_languages, tribes, repos, lightning, amboss, email } =
-    extras || {};
+  const { twitter, github, coding_languages, tribes, lightning, amboss, email } = extras || {};
 
   let tag = '';
   let githubTag = '';
@@ -321,23 +320,6 @@ export const AboutView = observer((props: AboutViewProps) => {
         </>
       )}
 
-      {repos && repos.length > 0 && (
-        <>
-          <Divider />
-          <T style={{ height: 20 }}>My Repos</T>
-          <Grow>
-            {repos.map((r: any, i: number) => (
-              <ItemRow key={`${i}myrepo`} style={{ width: 'fit-content' }}>
-                <Img src={'/static/github_logo.png'} style={{ opacity: 0.6 }} />
-                <a href={`https://github.com/${r?.label}`} target="_blank" rel="noreferrer">
-                  {r?.label}
-                </a>
-              </ItemRow>
-            ))}
-          </Grow>
-        </>
-      )}
-
       {tribes && tribes.length > 0 && (
         <>
           <Divider />