From 31d05cc84b96c9de69acd5c490233c08e51509a7 Mon Sep 17 00:00:00 2001
From: lingdocs <71590811+lingdocs@users.noreply.github.com>
Date: Sun, 24 Jul 2022 23:07:51 -0500
Subject: [PATCH] block-border to work with dark and light themes

---
 package.json                    | 2 +-
 src/App.css                     | 4 ++++
 src/components/blocks/Block.tsx | 3 +--
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index d17cd22..ad89c02 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/pashto-inflector",
-  "version": "3.5.2",
+  "version": "3.5.3",
   "author": "lingdocs.com",
   "description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations",
   "homepage": "https://verbs.lingdocs.com",
diff --git a/src/App.css b/src/App.css
index 86d7bec..41e45c4 100644
--- a/src/App.css
+++ b/src/App.css
@@ -52,6 +52,10 @@ body {
     color: var(--high-contrast);
 }
 
+.block-border {
+    border: 2px solid var(--farthest);
+}
+
 .p-text {
     font-size: var(--p-text-size);
 }
diff --git a/src/components/blocks/Block.tsx b/src/components/blocks/Block.tsx
index 2d68326..2a7e9e7 100644
--- a/src/components/blocks/Block.tsx
+++ b/src/components/blocks/Block.tsx
@@ -70,9 +70,8 @@ export default Block;
 
 function Border({ children, extraClassName, padding }: { children: JSX.Element | JSX.Element[] | string, extraClassName?: string, padding?: string }) {
     return <div
-        className={`d-flex flex-row justify-content-center align-items-center ${extraClassName ? extraClassName : ""}`}
+        className={`block-border d-flex flex-row justify-content-center align-items-center ${extraClassName ? extraClassName : ""}`}
         style={{
-            border: "2px solid black",
             padding: padding ? padding : "1rem",
             textAlign: "center",
         }}