layout changes

Author: gokultp

src/components/Layout.tsx

@@ -15,7 +15,7 @@ export default function Layout({
   return (
     <div className="mx-auto bg-gray-100 dark:bg-dark-800 min-h-screen">
       <Navbar />
-      <div className="grid grid-cols-9 gap-10 mt-10 px-20 pt-10">
+      <div className="grid grid-cols-9 gap-10 mt-10 px-60 pt-10">
         {sidebarContentLeft && (
           <aside className="col-span-2">{sidebarContentLeft}</aside>
         )}

src/components/UserDetails/Badges/Badge.tsx

@@ -17,27 +17,27 @@ const Badge = ({ badge }: { badge: Badge_node$key }) => {
 
   return (
     <div className="flex items-center ">
-      <Hexagon size={60} color="red">
+      <Hexagon size={36} color="red">
         <BadgeIcon displayName={data.displayName as LanguageName} />
       </Hexagon>
       <div className=" ml-8 dark:text-gray-300">
         <span className="font-bold block">Level: {data.currentLevel}</span>
-        <span className="text-sm block">524 lines to next level</span>
+        <span className="text-xs block">524 lines to next level</span>
         <div className="progress-bar">
           <style jsx>
             {`
               .progress-bar {
                 position: relative;
                 height: 10px;
-                width: 120px;
+                width: 100px;
                 background-color: #ccc;
                 border-radius: 5px;
                 box-shadow: inset 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
               }
               .progress-bar:after {
                 content: '';
                 position: absolute;
-                width: ${1.2 * data.progressPercentageToNextLevel}px;
+                width: ${data.progressPercentageToNextLevel}px;
                 height: inherit;
                 background-color: red;
                 border-radius: 5px;

src/components/UserDetails/Badges/BadgeIcon.tsx

@@ -33,7 +33,7 @@ type BadgeIconProps = {
 
 export default function BadgeIcon({ displayName }: BadgeIconProps) {
   return (
-    <div className="text-3xl z-10 badge-icon">
+    <div className="text-xl z-10 badge-icon">
       {iconMap[displayName]}
       <style>
         {`

src/components/UserDetails/Bio.tsx

@@ -29,7 +29,7 @@ const Bio = ({ user }: BioProps) => {
       }
     `
   )
-  const onChange = (evt: any) => setBio(evt.target.textContent)
+  const onChange = (evt: any) => setBio(evt.target.value)
   const onSubmit = () => {
     commitMutation({
       variables: {
@@ -39,14 +39,13 @@ const Bio = ({ user }: BioProps) => {
   }
 
   return (
-    <p
-      contentEditable={true}
-      onInput={onChange}
+    <input
+      onChange={onChange}
       onBlur={onSubmit}
       className="dark:text-gray-300"
-    >
-      {data.bio}
-    </p>
+      type="text"
+      defaultValue={data.bio}
+    />
   )
 }
 

src/components/UserDetails/UserDetails.tsx

@@ -30,7 +30,7 @@ const UserDetails = ({ user }: Props) => {
 
   return (
     <div className="flex flex-col items-center">
-      <img className="rounded-md w-32" src={data.avatar} alt={data.handle} />
+      <img className="rounded-md w-20" src={data.avatar} alt={data.handle} />
       <h1 className="dark:text-gray-400">@{data.handle}</h1>
       <Bio user={data} />
       <div className="my-4 flex space-x-4 dark:text-gray-400">