diff --git a/lib/frontend/js/pages/InboxPageMessages.re b/lib/frontend/js/pages/InboxPageMessages.re
index e7ac11b..79fd896 100644
--- a/lib/frontend/js/pages/InboxPageMessages.re
+++ b/lib/frontend/js/pages/InboxPageMessages.re
@@ -1,16 +1,9 @@
-let layoutCss = [%cx
- {|
- display: flex;
- padding-top: 2rem;
- padding-bottom: 2rem;
- gap: 2rem;
- flex-direction: column;
-|}
-];
+open InboxPageMessagesStyles;
[@react.component]
let make = () => {
-
+
+
;
diff --git a/lib/frontend/js/pages/InboxPageMessagesCard.re b/lib/frontend/js/pages/InboxPageMessagesCard.re
index 7b5663f..30d52b7 100644
--- a/lib/frontend/js/pages/InboxPageMessagesCard.re
+++ b/lib/frontend/js/pages/InboxPageMessagesCard.re
@@ -1,89 +1,49 @@
-let containerCss = [%cx
- {|
- display: flex;
- position: relative;
- width: 100%;
- height: 16rem;
-|}
-];
+open InboxPageMessagesStyles;
+open InboxPageMessagesCardHooks;
-let cardCss = [%cx
- {|
- height: 100%;
- width: 100%;
- position: absolute;
- backface-visibility: hidden;
- color: $(Theme.background11);
- font-family: "Poppins";
- font-size: 4rem;
- cursor: pointer;
-|}
-];
-
-let backCss = [%cx {|
- background-color: $(Theme.primary);
-|}];
-
-let faceCss = [%cx {|
- background-color: $(Theme.secondary);
-|}];
-
-let variants = {
- "toHidden": {
- "transform": [|
- "perspective(1000px) translateY(0px) rotateY(0deg)",
- "perspective(1000px) translateY(-10x) rotateY(0deg)",
- "perspective(1000px) translateY(-10px) rotateY(180deg)",
- "perspective(1000px) translateY(0px) rotateY(180deg)",
- |],
- "transition": {
- "duration": 0.6,
- "times": [|0.0, 0.16, 0.84, 1.0|],
- },
- },
- "toRevealed": {
- "transform": [|
- "perspective(1000px) translateY(0px) rotateY(180deg)",
- "perspective(1000px) translateY(-10px) rotateY(180deg)",
- "perspective(1000px) translateY(-10px) rotateY(360deg)",
- "perspective(1000px) translateY(0px) rotateY(360deg)",
- |],
- "transition": {
- "duration": 0.6,
- "times": [|0.0, 0.16, 0.84, 1.0|],
- },
- },
- "toDeleted": {
- "transform": [|"translateY(-50px)"|],
- },
+module Face = {
+ [@react.component]
+ let make = (~faceInitial, ~faceAnimate, ~toggleReveal) => {
+ let onClick = React.useCallback1(_ => toggleReveal(), [|toggleReveal|]);
+
+
+
+ {React.string("example content :3")}
+
+
+
+
+ ;
+ };
};
-type state =
- | Initial
- | Revealed
- | Hidden;
-
-let useRevealState = () => {
- let (state, reduce) =
- React.useReducer(
- (state, ()) =>
- switch (state) {
- | Initial => Revealed
- | Revealed => Hidden
- | Hidden => Revealed
- },
- Initial,
- );
-
- let toRevealed = Js.Nullable.return("toRevealed");
- let toHidden = Js.Nullable.return("toHidden");
- let null = Js.Nullable.null;
-
- // faceInitial, faceAnimate, backInitial, backAnimate
- switch (state) {
- | Initial => (toRevealed, null, toHidden, null, reduce)
- | Revealed => (null, toRevealed, null, toHidden, reduce)
- | Hidden => (null, toHidden, null, toRevealed, reduce)
+module Back = {
+ [@react.component]
+ let make = (~backInitial, ~backAnimate, ~toggleReveal) => {
+ let onClick = React.useCallback1(_ => toggleReveal(), [|toggleReveal|]);
+
+
+ ;
};
};
@@ -92,22 +52,8 @@ let make = () => {
let (faceInitial, faceAnimate, backInitial, backAnimate, toggleReveal) =
useRevealState();
- let onClick = React.useCallback1(_ => toggleReveal(), [|toggleReveal|]);
-
-
-
- {React.string("Face")}
-
-
- {React.string("Back")}
-
+
+
+
;
};
diff --git a/lib/frontend/js/pages/InboxPageMessagesCardHooks.re b/lib/frontend/js/pages/InboxPageMessagesCardHooks.re
new file mode 100644
index 0000000..1a1b05a
--- /dev/null
+++ b/lib/frontend/js/pages/InboxPageMessagesCardHooks.re
@@ -0,0 +1,58 @@
+let cardVariants = {
+ "toHidden": {
+ "transform": [|
+ "translateY(0px) rotateY(0deg)",
+ "translateY(-10px) rotateY(0deg)",
+ "translateY(-10px) rotateY(180deg)",
+ "translateY(0px) rotateY(180deg)",
+ |],
+ "transition": {
+ "duration": 0.6,
+ "times": [|0.0, 0.16, 0.84, 1.0|],
+ },
+ },
+ "toRevealed": {
+ "transform": [|
+ "translateY(0px) rotateY(180deg)",
+ "translateY(-10px) rotateY(180deg)",
+ "translateY(-10px) rotateY(360deg)",
+ "translateY(0px) rotateY(360deg)",
+ |],
+ "transition": {
+ "duration": 0.6,
+ "times": [|0.0, 0.16, 0.84, 1.0|],
+ },
+ },
+ "toDeleted": {
+ "transform": [|"translateY(-50px)"|],
+ },
+};
+
+let toRevealed = Js.Nullable.return("toRevealed");
+let toHidden = Js.Nullable.return("toHidden");
+let null = Js.Nullable.null;
+
+type revealState =
+ | Initial
+ | Revealed
+ | Hidden;
+
+let useRevealState = () => {
+ let (state, reduce) =
+ React.useReducer(
+ (state, ()) =>
+ switch (state) {
+ | Initial => Revealed
+ | Revealed => Hidden
+ | Hidden => Revealed
+ },
+ Initial,
+ );
+
+ // faceInitial, faceAnimate, backInitial, backAnimate
+ switch (state) {
+ | Initial => (toRevealed, null, toHidden, null, reduce)
+ | Revealed => (null, toRevealed, null, toHidden, reduce)
+ | Hidden => (null, toHidden, null, toRevealed, reduce)
+ };
+};
diff --git a/lib/frontend/js/pages/InboxPageMessagesStyles.re b/lib/frontend/js/pages/InboxPageMessagesStyles.re
new file mode 100644
index 0000000..b0dbabe
--- /dev/null
+++ b/lib/frontend/js/pages/InboxPageMessagesStyles.re
@@ -0,0 +1,168 @@
+let messagesCss = [%cx
+ {|
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ gap: 2rem;
+|}
+];
+
+let cardOuterCss = [%cx
+ {|
+ display: flex;
+ position: relative;
+ height: 20rem;
+ width: 100%;
+
+ $(Theme.afterMedium) {
+ width: calc(50% - 1rem);
+ }
+|}
+];
+
+let cardInnerCss = [%cx
+ {|
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ backface-visibility: hidden;
+ border-radius: 4px;
+ box-sizing: border-box;
+|}
+];
+
+let cardFaceCss =
+ cardInnerCss
+ ++ " "
+ ++ [%cx
+ {|
+ background-color: $(Theme.background11);
+ border-color: $(Theme.background9);
+ border-style: solid;
+ border-width: 2px;
+ color: $(Theme.foreground9);
+ overflow: hidden;
+ display: grid;
+ grid-template-areas:
+ "content content content"
+ "trash reply share";
+ grid-template-rows: 80% 20%;
+|}
+ ];
+
+let cardFaceCloseCss = [%cx
+ {|
+ position: absolute;
+ top: 0.5rem;
+ right: 0.5rem;
+ padding: 0;
+
+ border: none;
+ background-color: transparent;
+ cursor: pointer;
+ color: $(Theme.foreground9);
+
+ &:hover {
+ color: $(Theme.primary);
+ }
+|}
+];
+
+let cardFaceContentCss = [%cx
+ {|
+ font-family: "Poppins";
+ font-size: 1.2rem;
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 2rem;
+ grid-area: content;
+|}
+];
+
+let cardFaceButtonCss = [%cx
+ {|
+ flex-grow: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ padding: 0;
+
+ border-color: $(Theme.background9);
+ border-style: solid;
+ border-width: 2px 0 0 0;
+ background-color: transparent;
+ cursor: pointer;
+ font-family: "Poppins";
+ font-size: 1rem;
+
+ transition: color 150ms ease-in, background-color 150ms ease-in;
+
+ &:nth-child(2n) {
+ border-left-width: 2px;
+ border-right-width: 2px;
+ }
+|}
+];
+
+let cardFaceTrashCss =
+ cardFaceButtonCss
+ ++ " "
+ ++ [%cx
+ {|
+color: $(Theme.failure);
+&:hover {
+ color: $(Theme.background9);
+ background-color: $(Theme.failure);
+}
+grid-area: trash;
+|}
+ ];
+
+let cardFaceReplyCss =
+ cardFaceButtonCss
+ ++ " "
+ ++ [%cx
+ {|
+color: $(Theme.info);
+&:hover {
+ color: $(Theme.background9);
+ background-color: $(Theme.info);
+}
+grid-area: reply;
+|}
+ ];
+
+let cardFaceShareCss =
+ cardFaceButtonCss
+ ++ " "
+ ++ [%cx
+ {|
+color: $(Theme.primary);
+&:hover {
+ color: $(Theme.background9);
+ background-color: $(Theme.primary);
+}
+grid-area: share;
+|}
+ ];
+
+let cardBackCss =
+ cardInnerCss
+ ++ " "
+ ++ [%cx
+ {|
+ background-color: $(Theme.background9);
+ background-image: url("static/noise.png");
+ border-radius: 4px;
+ color: $(Theme.primary);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+|}
+ ];
diff --git a/lib/frontend/universal/Icons.re b/lib/frontend/universal/Icons.re
index 66bb2ff..c67443c 100644
--- a/lib/frontend/universal/Icons.re
+++ b/lib/frontend/universal/Icons.re
@@ -15,6 +15,23 @@ module BookLine = {
};
};
+module ChatLine = {
+ [@react.component]
+ let make = (~size="1rem", ~className=?) => {
+
;
+ };
+};
+
module CheckLine = {
[@react.component]
let make = (~size="1rem", ~className="") => {
@@ -49,6 +66,23 @@ module CloseLine = {
};
};
+module DeleteBinLine = {
+ [@react.component]
+ let make = (~size="1rem", ~className=?) => {
+
;
+ };
+};
+
module FunctionVariant = {
[@react.component]
let make = (~size="1rem", ~className=?) => {
diff --git a/lib/frontend/universal/pages/InboxPageLayout.re b/lib/frontend/universal/pages/InboxPageLayout.re
index fc61d53..acf0121 100644
--- a/lib/frontend/universal/pages/InboxPageLayout.re
+++ b/lib/frontend/universal/pages/InboxPageLayout.re
@@ -1,8 +1,8 @@
-let inboxPageCss = [%cx {|
+let inboxCss = [%cx {|
flex-grow: 1;
|}];
[@react.component]
let make = (~children) => {
-
children ;
+
children ;
};