From f9ee548fd21cb9a408c4fbba94c9f3ff62dff6f4 Mon Sep 17 00:00:00 2001
From: chance-stribling <cstribling1717@gmail.com>
Date: Tue, 6 Aug 2024 13:16:03 -0400
Subject: [PATCH 1/2] made some small css changes to observation details

---
 .../js/components/ObservationDetails.jsx      | 31 ++++++++++---------
 resources/assets/sass/_layout.scss            | 14 +++++++++
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/resources/assets/js/components/ObservationDetails.jsx b/resources/assets/js/components/ObservationDetails.jsx
index d6534a9b..9924490b 100644
--- a/resources/assets/js/components/ObservationDetails.jsx
+++ b/resources/assets/js/components/ObservationDetails.jsx
@@ -279,9 +279,9 @@ export default class ObservationDetails extends Component {
     let confirmation = this.state.confirmation
 
     return (
-      <div>
-        <div className="flexbox observation-tools">
-          <a className="button is-outlined"
+      <div style={{marginTop: '-20px'}}>
+        <div className="observation-tools" >
+          <a className="button is-outlined"  style={{marginTop: '20px'}}
              onClick={() => this.setState({controlModalContent: 'collection', showControlModal: true})}>
             <span className="icon is-small">
               <i className="fa fa-star text-success"></i>
@@ -289,7 +289,7 @@ export default class ObservationDetails extends Component {
             <span>Add to Collection</span>
           </a>
           {User.owns(observation) ?
-            <a className="button is-outlined"
+            <a className="button is-outlined"  style={{marginTop: '20px'}}
                onClick={() => this.setState({showShareLinkModal: true})}>
               <span className="icon is-small">
                 <i className="fa fa-share text-success"></i>
@@ -297,7 +297,7 @@ export default class ObservationDetails extends Component {
               <span>Share Link</span>
             </a> : null}
           {observation.flags.length === 0 ?
-            <a className="button is-outlined"
+            <a className="button is-outlined"  style={{marginTop: '20px'}}
                onClick={() => this.setState({controlModalContent: 'flag', showControlModal: true})}>
               <span className="icon is-small">
                 <i className="fa fa-flag text-danger"></i>
@@ -306,7 +306,7 @@ export default class ObservationDetails extends Component {
             </a>
             : null}
           {User.can('contact users') ?
-            <a className="button is-outlined"
+            <a className="button is-outlined"  style={{marginTop: '20px'}}
                onClick={() => this.setState({showEmail: true})}>
               <span className="icon is-small">
                 <i className="fa fa-envelope text-info"></i>
@@ -314,9 +314,11 @@ export default class ObservationDetails extends Component {
               <span>Contact Submitter</span>
             </a>
             : null}
-          {User.can('confirm species') ?
-              <a className={`button is-outlined is-clear${confirmation.id !== -1 && !confirmation.correct ? ' is-active' : ''}`}
-                  onClick={() => this.confirm(false, observation)} >
+<div className="flex-row">
+
+          {User.can('confirm species') ? 
+              <a   style={{marginTop: '20px'}}className={`button is-outlined is-clear${confirmation.id !== -1 && !confirmation.correct ? ' is-active' : ''}`}
+              onClick={() => this.confirm(false, observation)} >
                   <Tooltip label={confirmation.id !== -1 && !confirmation.correct ? 'Undo' : 'Mark as incorrect species'}
                            hideOnClick={false}>
                       <span>{this.state.incorrectMarks}</span>
@@ -326,7 +328,7 @@ export default class ObservationDetails extends Component {
                   <span>Marks</span>
                   </Tooltip>
               </a> :
-              <div className={`disabled`}>
+              <div className="disabled" style={{width: 'fit-content'}}>
                   <span>{this.state.incorrectMarks}</span>
                   <span className="icon is-small ml-1 mr-1">
                           <b className="fa fa-times text-danger"></b>
@@ -334,8 +336,8 @@ export default class ObservationDetails extends Component {
                   <span>Marks</span>
               </div>}
             {User.can('confirm species') ?
-                <a className={`button is-outlined is-clear${confirmation.id !== -1 && confirmation.correct ? ' is-active' : ''}`}
-                   onClick={() => this.confirm(true, observation)}>
+                <a style={{marginTop: '20px'}} className={`button is-outlined is-clear${confirmation.id !== -1 && confirmation.correct ? ' is-active' : ''}`}
+                onClick={() => this.confirm(true, observation)}>
                   <Tooltip label={confirmation.id !== -1 && confirmation.correct ? 'Undo' : 'Confirm species'}
                            hideOnClick={false}>
                     <span>{this.state.correctMarks}</span>
@@ -345,14 +347,15 @@ export default class ObservationDetails extends Component {
                     <span>Marks</span>
                   </Tooltip>
                 </a> :
-                <div className={`disabled`} >
+                <div className="disabled" style={{width: 'fit-content'}}>
                   <span>{this.state.correctMarks}</span>
                   <span className="icon is-small ml-1 mr-1">
                           <b className="fa fa-check text-success"></b>
                       </span>
                   <span>Marks</span>
                 </div>}
-        </div>
+                  </div>
+                  </div>
 
         {this._renderControlModal()}
 
diff --git a/resources/assets/sass/_layout.scss b/resources/assets/sass/_layout.scss
index d9f74040..5246f96f 100644
--- a/resources/assets/sass/_layout.scss
+++ b/resources/assets/sass/_layout.scss
@@ -337,3 +337,17 @@ a.box {
     flex-direction: row;
 }
 
+.flex{
+  display: flex;
+}
+.flex-row{
+  display: flex;
+  flex-direction: row;
+}
+.flex-col{
+  display: flex;
+  flex-direction: column;
+}
+.fit-content{
+  width: fit-content;
+}
\ No newline at end of file

From d133569817fd303255b3a2c7f6278c3021ba459a Mon Sep 17 00:00:00 2001
From: Noah Caldwell <noahgreycaldwell@gmail.com>
Date: Wed, 7 Aug 2024 09:03:36 -0500
Subject: [PATCH 2/2] adds margin to buttons

---
 resources/assets/js/components/ObservationDetails.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/assets/js/components/ObservationDetails.jsx b/resources/assets/js/components/ObservationDetails.jsx
index 9924490b..259c0674 100644
--- a/resources/assets/js/components/ObservationDetails.jsx
+++ b/resources/assets/js/components/ObservationDetails.jsx
@@ -316,8 +316,8 @@ export default class ObservationDetails extends Component {
             : null}
 <div className="flex-row">
 
-          {User.can('confirm species') ? 
-              <a   style={{marginTop: '20px'}}className={`button is-outlined is-clear${confirmation.id !== -1 && !confirmation.correct ? ' is-active' : ''}`}
+          {User.can('confirm species') ?
+              <a   style={{marginTop: '20px'}}className={`mr-2 button is-outlined is-clear${confirmation.id !== -1 && !confirmation.correct ? ' is-active' : ''}`}
               onClick={() => this.confirm(false, observation)} >
                   <Tooltip label={confirmation.id !== -1 && !confirmation.correct ? 'Undo' : 'Mark as incorrect species'}
                            hideOnClick={false}>