84 pwa new look and feel

sensum-pwa/src/core/ui/graveyardButton/Core_Ui_GraveyardButton.res

@@ -19,7 +19,7 @@ let make = () => {
     className={isActive() ? "bg-purple-900" : "hover:bg-purple-900"}
     disabled={isActive()}
     onClick={onClick}>
-    <a className="hidden lg:block text-xl text-purple-50 pl-5 pr-5">{"GRAVEYARD"->React.string}</a>
-    <a className="lg:hidden text-xl text-purple-50 pl-5 pr-5">{"G"->React.string}</a>
+    <a className="hidden lg:block text-xl text-purple-50 pl-5 pr-5">{"🪦"->React.string}</a>
+    <a className="lg:hidden text-xl text-purple-50 pl-5 pr-5">{"🪦"->React.string}</a>
   </button>
 }

sensum-pwa/src/core/ui/navbar/Core_Ui_Navbar.res

@@ -1,9 +1,10 @@
-
 module DefaultRightComponent = {
   @react.component
   let make = () => {
     <div className="flex">
-      <Core_Ui_GraveyardButton /><Core_Ui_SanctuaryButton /><Core_Ui_ConfigButton />
+      <Core_Ui_GraveyardButton />
+      <Core_Ui_SanctuaryButton />
+      <Core_Ui_ConfigButton />
     </div>
   }
 }
@@ -14,15 +15,16 @@ let make = (~rightComponent: React.element=<DefaultRightComponent />) => {
     ReactEvent.Mouse.preventDefault(event)
     RescriptReactRouter.replace("/dsensum")
   }
-  
+
   // FIXME: Make it responsive!
-  <header
-    className="border-purple-900 border-b-2 flex justify-between">
-    <button onClick>
-      <h1 className="pl-2 text-xl lg:text-4xl text-purple-50">
-        {"d-sensum"->React.string}
-      </h1>
-    </button>
+  <header className="flex items-center justify-between">
+    <div className="w-36 h-24 bg-contain flex justify-center items-center bg-sensum-logo bg-center">
+      <div
+        data="δensum"
+        className="text-purple-50 text-base animate-gltch before:content-[attr(data)] before:animate-gltch-before before:absolute before:left-0 after:content-[attr(data)] after:animate-gltch-after after:absolute after:left-0">
+        {"δensum"->React.string}
+      </div>
+    </div>
     {rightComponent}
   </header>
 }

sensum-pwa/src/core/ui/sanctuaryButton/Core_Ui_SanctuaryButton.res

@@ -18,7 +18,7 @@ let make = () => {
     className={isActive() ? "bg-purple-900" : "hover:bg-purple-900"}
     disabled={isActive()}
     onClick={onClick}>
-    <a className="hidden lg:block text-xl text-purple-50 pl-5 pr-5">{"SANCTUARY"->React.string}</a>
-    <a className="lg:hidden text-xl text-purple-50 pl-5 pr-5">{"S"->React.string}</a>
+    <a className="hidden lg:block text-xl text-purple-50 pl-5 pr-5">{"⛩"->React.string}</a>
+    <a className="lg:hidden text-xl text-purple-50 pl-5 pr-5">{"⛩"->React.string}</a>
   </button>
 }

sensum-pwa/src/pages/newSensation/Pages_NewSensation.res

@@ -1,4 +1,5 @@
-type pickingAvatar = Picking | Selected((string, string)) | AboutToSelect
+type avatarType = (int, (string, string))
+type pickingAvatar = NoneSelected | Selected(avatarType)
 
 // (!) Do not use these keys in mainnet (!)
 // The Messenger private key
@@ -10,13 +11,15 @@ module MessengerInfo = {
   @react.component
   let make = (~wallet: Types.wallet) => {
     let (balance, setBalance) = React.useState(() => None)
+
     React.useEffect0(() => {
       let p = async () => {
         try {
           let b = await Ethers.getWalletBalance(~wallet)
           setBalance(_ => Some(b))
         } catch {
-        | Js.Exn.Error(e) => switch Js.Exn.message(e) {
+        | Js.Exn.Error(e) =>
+          switch Js.Exn.message(e) {
           | Some(msg) => Js.Console.log2("[error] getWalletBalance", msg)
           | None =>
             Js.Console.log2("[error] getWalletBalance", "Some other exception has been thrown")
@@ -26,30 +29,118 @@ module MessengerInfo = {
       p()->ignore
       None
     })
-    <div className="flex flex-col">
-      <label className="text-md text-purple-50 mx-1"> {"Messenger"->React.string} </label>
-      <div className="flex flex-row flex-wrap mx-1 gap-2">
-        <label className="truncate text-md text-purple-50">
-          {"* Address: "->React.string}
-          {wallet.address->React.string}
-        </label>
-      </div>
-      <div className="flex flex-row flex-wrap mx-1 gap-2">
-        <label className="truncate text-md text-purple-50">
-          {"* Mana: "->React.string}
+
+    <div className="text-[0.7rem] text-[#c1bbbd]">
+      <div className="overflow-hidden whitespace-nowrap overflow-ellipsis text-[#b0e0e6]">
+        {"✦ "->React.string}
+        <span>
           {switch balance {
           | None => "..."->React.string
           | Some(b) =>
             `${b->Types.BigInt.toString} ${b->Types.BigInt.toString == "0"
                 ? "(Pray for power!)"
                 : ""}`->React.string
           }}
-        </label>
+        </span>
+      </div>
+      <div className="overflow-hidden whitespace-nowrap overflow-ellipsis text-[#708090]">
+        {"✎ "->React.string}
+        <span> {wallet.address->React.string} </span>
       </div>
+      <button
+        className="border-t divide-y cursor-pointer text-[#c1bbbd] bg-transparent outline-0 tracking-[0.5rem] p-2 w-full hover:text-[#dda0dd]">
+        {"TRANSMIT"->React.string}
+      </button>
     </div>
   }
 }
 
+module Facet = {
+  @react.component
+  let make = (
+    ~avt: avatarType,
+    ~setPickingAvatar: (pickingAvatar => pickingAvatar) => unit,
+    ~isSelected: bool,
+  ) => {
+    let (pos, (avatar, avatarCustomClass)) = avt
+
+    <div
+      className={`inline-block p-1 text-center w-13 overflow-hidden text-[0.7rem] text-[#c1bbbd] cursor-pointer ${avatarCustomClass} hover:text-[#dda0dd] ${isSelected
+          ? "border-solid border-[#581185] border rounded"
+          : ""}`}
+      onClick={_ => {
+        switch State.Avatar.optionsMap->Belt.Map.Int.get(pos) {
+        | Some(avatar, avatarCustomClass) =>
+          setPickingAvatar(_ => Selected((pos, (avatar, avatarCustomClass))))
+        | None => Js.Console.log("error avatar not found")
+        }
+      }}>
+      {avatar->React.string}
+    </div>
+  }
+}
+
+module Facets = {
+  @react.component
+  let make = (
+    ~pickingAvatar: pickingAvatar,
+    ~setPickingAvatar: (pickingAvatar => pickingAvatar) => unit,
+  ) => {
+    let isSelected = pos =>
+      switch pickingAvatar {
+      | Selected((selected, _)) => selected == pos
+      | NoneSelected => false
+      }
+
+    <div className="flex flex-row gap-3 justify-around items-center flex-wrap mb-8">
+      {State.Avatar.optionsArray
+      ->Belt.Array.map(avt => {
+        let (pos, _) = avt
+        <Facet key={pos->Belt.Int.toString} avt setPickingAvatar isSelected={isSelected(pos)} />
+      })
+      ->React.array}
+    </div>
+  }
+}
+
+module NewSensationBox = {
+  @react.component
+  let make = (
+    ~config: Types.config,
+    ~onSensationUpdate: (Types.sensation => Types.sensation) => unit,
+  ) => {
+    let (pickingAvatar, setPickingAvatar) = React.useState(() => NoneSelected)
+
+    let onChangeSensationMessage = event => {
+      let message = ReactEvent.Form.target(event)["value"]
+      onSensationUpdate(prev => {...prev, Types.message})
+    }
+
+    React.useEffect1(() => {
+      switch pickingAvatar {
+      | Selected((facet, _)) =>
+        onSensationUpdate(prev => {...prev, Types.avatar: facet->Ethers.toBigInt})
+      | NoneSelected => ()
+      }
+
+      None
+    }, [pickingAvatar])
+
+    <section className="block py-8 px-0 text-purple-50">
+      <label className="mb-1"> {"Sensation"->React.string} </label>
+      <textarea
+        className="box-border italic bg-transparent outline-0 text-white w-full text-sm border-dotted border border-[#581185] p-2 mb-1 resize-none "
+        rows={3}
+        minLength={1}
+        maxLength={512}
+        placeholder="Express your feelings..."
+        onChange={onChangeSensationMessage}
+      />
+      <Facets pickingAvatar setPickingAvatar />
+    </section>
+  }
+}
+
 @react.component
 let make = (~config: Types.config) => {
   let provider = Ethers.getProvider(~networkUrl=config.networkUrl)
@@ -60,12 +151,6 @@ let make = (~config: Types.config) => {
     Types.avatar: Ethers.toBigInt(0),
     Types.message: "",
   })
-  let (pickingAvatar, setPickingAvatar) = React.useState(() => AboutToSelect)
-
-  let onChangeSensationMessage = event => {
-    let message = ReactEvent.Form.target(event)["value"]
-    setSensation(prev => {...prev, Types.message})
-  }
 
   // TODO: We could add info about estimated gas cost!
 
@@ -96,86 +181,13 @@ let make = (~config: Types.config) => {
     }
   }
 
-  <div className="bg-black flex flex-col h-screen overflow-hidden">
-    <Core.Ui.Navbar />
-    <main className="overflow-y-scroll">
-      {switch pickingAvatar {
-      | Picking =>
-        <div className={`flex flex-row bg-black flex-wrap mx-5`}>
-          {State.Avatar.optionsArray
-          ->Belt.Array.map(option => {
-            let (pos, (avatar, avatarCustomClass)) = option
-            <button
-              key={pos->Belt.Int.toString}
-              className={`my-5 mx-1 w-28 h-28 bg-black flex items-center justify-center border-2 border-solid border-purple-50 px-1 text-purple-50 hover:bg-purple-900 ${avatarCustomClass}`}
-              onClick={_ => {
-                switch State.Avatar.optionsMap->Belt.Map.Int.get(pos) {
-                | Some(avatar, avatarCustomClass) => {
-                    setSensation(prevSensation => {
-                      ...prevSensation,
-                      Types.avatar: pos->Ethers.toBigInt,
-                    })
-                    setPickingAvatar(_ => Selected((avatar, avatarCustomClass)))
-                  }
-                | None => Js.Console.log("Error: Avatar not found")
-                }
-              }}>
-              {avatar->React.string}
-            </button>
-          })
-          ->React.array}
-        </div>
-      | AboutToSelect =>
-        <div className={`flex flex-col bg-black`}>
-          <div className={`flex flex-row flex-nowrap bg-black`}>
-            <button
-              className="my-3 mx-1 w-28 h-28 bg-black flex items-center justify-center border-2 border-solid border-purple-50 text-md px-5 opacity-50 text-purple-50 hover:bg-purple-900"
-              onClick={_ => setPickingAvatar(_ => Picking)}>
-              {"Pick Avatar"->React.string}
-            </button>
-            <textarea
-              className={`my-3 mx-1 p-2 flex-1 h-28 form-control bg-black resize-none text-lg text-purple-50 font-medium justify-center border-2  border-dotted border-purple-50 focus:outline-none focus:border-purple-900`}
-              id="newSensationMessage"
-              placeholder="Write your feelings..."
-              onChange=onChangeSensationMessage
-              minLength=1
-              maxLength=512
-            />
-          </div>
-          <MessengerInfo wallet />
-          <button
-            className="my-1 mx-1 bg-black items-center justify-center border-2 border-solid border-purple-50 text-md px-5 text-purple-50 disabled:opacity-50"
-            disabled=true>
-            {"TRANSMIT SENSATION"->React.string}
-          </button>
-        </div>
-      | Selected((avatar, avatarCustomClass)) =>
-        <div className={`flex flex-col bg-black`}>
-          <div className={`flex flex-row flex-nowrap bg-black`}>
-            <button
-              className=`my-3 mx-1 w-32 h-28 bg-purple-900 flex items-center justify-center border-2 border-solid border-purple-50  px-1 text-purple-50 hover:bg-black ${avatarCustomClass}`
-              onClick={_ => setPickingAvatar(_ => Picking)}>
-              {avatar->React.string}
-            </button>
-            <textarea
-              className="my-3 mx-1 p-2 w-full h-28 form-control bg-black resize-none text-lg text-purple-50 font-medium justify-center border-2 border-dotted border-purple-50 focus:outline-none focus:border-purple-900"
-              id="newSensationMessage"
-              placeholder="Write your feelings..."
-              value={sensation.message}
-              onChange=onChangeSensationMessage
-              minLength=1
-              maxLength=512
-            />
-          </div>
-          <MessengerInfo wallet />
-          <button
-            className="my-1 mx-1 bg-black items-center justify-center border-2 border-solid border-purple-50 text-md px-5 text-purple-50 hover:bg-purple-900 disabled:opacity-50"
-            onClick={_ => onTransmitSensation()->ignore}
-            disabled={trasmittingSensation || sensation.message == ""}>
-            {(trasmittingSensation ? "TRANSMITTING..." : "TRANSMIT SENSATION")->React.string}
-          </button>
-        </div>
-      }}
+  <div className="bg-custom-gradient h-screen overflow-hidden hover:overflow-y-scroll">
+    <main className="py-16 px-8  mx-auto my-0 max-w-3xl">
+      <div className="flex flex-col ">
+        <Core.Ui.Navbar />
+        <NewSensationBox config onSensationUpdate={setSensation} />
+        <MessengerInfo wallet />
+      </div>
     </main>
   </div>
 }