From a2a33236492ac475c722448b2951b61308000e98 Mon Sep 17 00:00:00 2001 From: MurakawaTakuya Date: Sun, 27 Oct 2024 11:50:26 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=E3=83=90=E3=83=96=E3=83=AB=E3=83=87?= =?UTF-8?q?=E3=82=B6=E3=82=A4=E3=83=B3=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Bubble/Bubble.module.scss | 61 ++++++++++++++++++- frontend/src/components/Bubble/Bubble.tsx | 41 +++++++++++-- frontend/src/styles/style.scss | 6 +- 3 files changed, 99 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/Bubble/Bubble.module.scss b/frontend/src/components/Bubble/Bubble.module.scss index 18e0a90..1c11538 100644 --- a/frontend/src/components/Bubble/Bubble.module.scss +++ b/frontend/src/components/Bubble/Bubble.module.scss @@ -6,6 +6,65 @@ color: #969696; } +.bubble { + width: 100%; + margin: 8px 0; + overflow: hidden; +} + +.bubble .chat { + width: 100%; + text-align: left; +} + +.userData { + text-align: left; +} + +.message, +.myMessage { + position: relative; + display: inline-block; + max-width: 250px; + padding: 10px 12px; + border-radius: 20px; + P { + padding: 0; + margin: 0; + font-size: 18px; + overflow-wrap: break-word; + } +} + .message { - overflow-wrap: break-word; + margin: 0 0 0 10px; + background: var(--bubble-color); + &:after { + position: absolute; + top: 3px; + left: -19px; + display: inline-block; + content: ""; + border: 8px solid transparent; + border-right: 18px solid var(--bubble-color); + -webkit-transform: rotate(35deg); + transform: rotate(35deg); + } +} + +.myMessage { + float: right; + max-width: 250px; + margin: 0 10px 0 10px; + background: var(--my-bubble-color); + p:after { + position: absolute; + top: 3px; + right: -19px; + content: ""; + border: 8px solid transparent; + border-left: 18px solid var(--my-bubble-color); + -webkit-transform: rotate(-35deg); + transform: rotate(-35deg); + } } diff --git a/frontend/src/components/Bubble/Bubble.tsx b/frontend/src/components/Bubble/Bubble.tsx index d012940..39e7f0b 100644 --- a/frontend/src/components/Bubble/Bubble.tsx +++ b/frontend/src/components/Bubble/Bubble.tsx @@ -8,11 +8,40 @@ export default function Bubble({ bubble: messageDownEventInterface; }) { return ( -

- {bubble.name} - - #{bubble.addressHash.slice(0, 4)} - : {bubble.message} -

+
+ {bubble.isSelfMessage ? ( + <> +
+ {bubble.name} + + #{bubble.addressHash.slice(0, 4)} + +
+
+
+
+

{bubble.message}

+
+
+
+ + ) : ( + <> +
+ {bubble.name} + + #{bubble.addressHash.slice(0, 4)} + +
+
+
+
+

{bubble.message}

+
+
+
+ + )} +
); } diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss index bfcfd5b..6b3020d 100644 --- a/frontend/src/styles/style.scss +++ b/frontend/src/styles/style.scss @@ -1,5 +1,7 @@ :root { --header-height: 60px; + --bubble-color: #9edbff; + --my-bubble-color: #3af849; } html { @@ -15,8 +17,8 @@ body { "Segoe UI Symbol", "Noto Color Emoji"; background: linear-gradient( 0deg, - rgb(181, 239, 249) 10.5%, - rgb(254, 254, 254) 86.8% + rgb(177, 244, 255) 10.5%, + rgb(231 255 247) 86.8% ); } From 7582e90d7b17ffe1b9441573c158920306ce3d2e Mon Sep 17 00:00:00 2001 From: MurakawaTakuya Date: Sun, 27 Oct 2024 11:58:53 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=E3=83=A1=E3=83=83=E3=82=BB=E3=83=BC?= =?UTF-8?q?=E3=82=B8=E5=85=A5=E5=8A=9B=E6=AC=84=E3=81=AE=E3=83=87=E3=82=B6?= =?UTF-8?q?=E3=82=A4=E3=83=B3=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/app/page.module.scss | 1 + frontend/src/components/Bubble/Bubble.module.scss | 2 +- .../src/components/SendForm/SendForm.module.scss | 15 ++++++++++++++- frontend/src/components/SendForm/SendForm.tsx | 2 +- frontend/src/styles/style.scss | 4 ++-- 5 files changed, 19 insertions(+), 5 deletions(-) diff --git a/frontend/src/app/page.module.scss b/frontend/src/app/page.module.scss index fe3df8d..133e4bd 100644 --- a/frontend/src/app/page.module.scss +++ b/frontend/src/app/page.module.scss @@ -1,3 +1,4 @@ .messageList { + margin-top: 10px; overflow: auto; } diff --git a/frontend/src/components/Bubble/Bubble.module.scss b/frontend/src/components/Bubble/Bubble.module.scss index 1c11538..0ed2f5d 100644 --- a/frontend/src/components/Bubble/Bubble.module.scss +++ b/frontend/src/components/Bubble/Bubble.module.scss @@ -27,7 +27,7 @@ display: inline-block; max-width: 250px; padding: 10px 12px; - border-radius: 20px; + border-radius: 25px; P { padding: 0; margin: 0; diff --git a/frontend/src/components/SendForm/SendForm.module.scss b/frontend/src/components/SendForm/SendForm.module.scss index 364417c..75aa308 100644 --- a/frontend/src/components/SendForm/SendForm.module.scss +++ b/frontend/src/components/SendForm/SendForm.module.scss @@ -3,8 +3,21 @@ min-height: 40px; margin: 3px auto 35px auto; input { - width: min(80vw, 500px); + width: min(75vw, 500px); padding: 8px 8px 6px; font-size: 18px; } } + +.textField { + margin-right: 5px; + > div { + height: 45px; + background: white; + border-radius: 20px; + > input { + padding: 0; + margin: 8px 15px 6px; + } + } +} diff --git a/frontend/src/components/SendForm/SendForm.tsx b/frontend/src/components/SendForm/SendForm.tsx index c2c7579..e48fc9b 100644 --- a/frontend/src/components/SendForm/SendForm.tsx +++ b/frontend/src/components/SendForm/SendForm.tsx @@ -25,8 +25,8 @@ export default function SendForm({ socket }: SendFormProps) {
setInput(e.target.value)} - style={{ marginRight: "5px" }} placeholder="メッセージを入力" onKeyPress={(e) => { if (e.key === "Enter") { diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss index 6b3020d..4727a2c 100644 --- a/frontend/src/styles/style.scss +++ b/frontend/src/styles/style.scss @@ -17,8 +17,8 @@ body { "Segoe UI Symbol", "Noto Color Emoji"; background: linear-gradient( 0deg, - rgb(177, 244, 255) 10.5%, - rgb(231 255 247) 86.8% + rgb(191 246 255) 10.5%, + rgb(230 255 247) 86.8% ); } From 2a6c784a3290d81df1da35598bcd394d73626c84 Mon Sep 17 00:00:00 2001 From: MurakawaTakuya Date: Sun, 27 Oct 2024 12:16:38 +0900 Subject: [PATCH 3/3] =?UTF-8?q?fixup!=20=E3=83=A1=E3=83=83=E3=82=BB?= =?UTF-8?q?=E3=83=BC=E3=82=B8=E5=85=A5=E5=8A=9B=E6=AC=84=E3=81=AE=E3=83=87?= =?UTF-8?q?=E3=82=B6=E3=82=A4=E3=83=B3=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Header/Header.tsx | 2 +- frontend/src/components/SendForm/SendForm.module.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index e28e8ea..0ca641a 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -9,7 +9,7 @@ export default function Header() {