From 6c048d18f30abe107e0749a19d546dd356d810c6 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Fri, 17 Feb 2023 15:16:40 +0000
Subject: [PATCH] [PS-2266][SG-1067] Desktop: restyle generator panel to be
 panel-like and avoid overflowing (#4480)

* Port browser styles for generated password from browser to desktop

* Tweak styles

as the overall styles seem to diverge quite a bit from those of the browser extension, so things like the border color etc aren't as nicely defined, and there's already padding happening on the outer container, making the extra padding superfluous

* Wrap generator up as a `.box` / `.box-content` construct

adds the nice consistent box styles, same as the following blocks of content

* Wrap `.box` around both password AND username generated blocks

* Remove panel-like style, add browser extension border style
---
 apps/desktop/src/scss/misc.scss      | 19 +++++++++++++++----
 apps/desktop/src/scss/variables.scss |  4 ++++
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/apps/desktop/src/scss/misc.scss b/apps/desktop/src/scss/misc.scss
index c5aabb5b07..1cda6ee474 100644
--- a/apps/desktop/src/scss/misc.scss
+++ b/apps/desktop/src/scss/misc.scss
@@ -191,23 +191,34 @@ p.lead {
 .generated-block {
   font-size: $font-size-large;
   font-family: $font-family-monospace;
-  min-height: 50px;
+  padding: 8px 10px 8px 0;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  border-radius: $border-radius;
+  border: 1px solid;
+
+  @include themify($themes) {
+    background-color: transparent;
+    border-color: themed("borderColorAlt");
+  }
 
   .modal-body & {
-    margin: 10px;
+    margin-top: 10px;
   }
 
   .generated-wrapper {
     text-align: left;
     width: 100%;
+    min-width: 0;
+    white-space: pre-wrap;
+    word-break: break-all;
+    padding: 15px;
   }
 
   .action-buttons {
     display: flex;
     align-self: center;
+    height: 100%;
+    margin-left: 10px;
 
     button {
       margin-left: 10px;
diff --git a/apps/desktop/src/scss/variables.scss b/apps/desktop/src/scss/variables.scss
index 983a06d706..65f1e6b2e9 100644
--- a/apps/desktop/src/scss/variables.scss
+++ b/apps/desktop/src/scss/variables.scss
@@ -33,6 +33,7 @@ $background-color-alt2: #ededed;
 $box-background-color: $background-color;
 $box-background-hover-color: $list-item-hover;
 $box-border-color: $border-color;
+$border-color-alt: #c3c5c7;
 
 $button-border-color: darken($border-color-dark, 12%);
 $button-background-color: white;
@@ -47,6 +48,7 @@ $themes: (
     textColor: $text-color,
     borderColor: $border-color-dark,
     backgroundColor: $background-color,
+    borderColorAlt: $border-color-alt,
     backgroundColorAlt: $background-color-alt,
     backgroundColorAlt2: $background-color-alt2,
     scrollbarColor: rgba(100, 100, 100, 0.2),
@@ -103,6 +105,7 @@ $themes: (
     textColor: #ffffff,
     borderColor: #2f2f2f,
     backgroundColor: #363636,
+    borderColorAlt: #6e788a,
     backgroundColorAlt: #3d3d3d,
     backgroundColorAlt2: #222222,
     scrollbarColor: #4d4d4d,
@@ -159,6 +162,7 @@ $themes: (
     textColor: $nord5,
     borderColor: $nord0,
     backgroundColor: $nord2,
+    borderColorAlt: $nord5,
     backgroundColorAlt: $nord1,
     backgroundColorAlt2: $nord1,
     scrollbarColor: $nord4,