Updating buttons, code conventions, fixing about page error.

README.md

@@ -1,2 +1,39 @@
-# SocialPredict
+# About SocialPredict
 
+## Empowering Communities with Domain-Specific Insights
+
+Have you heard of Prediction Markets?
+
+- Prediction Markets, unlike polls, incentivize accuracy. Participants take a stake in what they think is correct, promoting rigorous research and reducing bias.
+- In contrast, social media posts and polls, using upvotes and downvotes or having users choose with no stake, are not as robust.
+- Of course, as with anything, the knowledge of a community is tied to the ability of the participants.
+- Our solution is to empower individuals to run their own prediction market platforms to attempt to use the wisdom of their own crowds to out-predict one another.
+
+### Efficiency through Community Engagement
+
+SocialPredict is Open Source Software Which:
+
+- Embraces the open-source ethos, making our platform free for anyone to deploy.
+- Enables users to harness domain-specific expertise to create more accurate predictions.
+
+### Domain-Specific Prediction Markets
+
+Imagine a prediction market platform tailored to specific interests, for example, photography and cameras:
+
+- An admin runs a photographers-and-industry-specialists-only prediction market platform.
+- Discussions and bets on technology predictions, specific to photography and adjacent technology will focus on understanding what will be new in the following year.
+
+SocialPredict's mission is to provide a versatile platform that:
+
+- Empowers communities to predict outcomes efficiently.
+- Fosters a deeper understanding of chosen domains.
+- Facilitates the exchange of valuable insights.
+
+### Join us in shaping the future of prediction markets by building connections and expertise within your community.
+
+## README/ Contents
+
+* [Info on Market Mathematics](/README/README-MATH.md)
+* [Info on How Economics Can Be Customized](/README/README-CONFIG.md)
+* [Info on Development Conventions](/README/README-CONVENTIONS.md)
+* [Info on Feature Roadmap](/README/README-ROADMAP.md)

README/README-CONFIG.md

@@ -0,0 +1,26 @@
+# Economics Configuration
+
+* The economics of SocialPredict can be customized upon set up based upon entries in a YAML file.
+* Elements such as the cost to create a market, what the initial probability of a market is set to, how much a market is subsidized by the computer, trader bonuses and so on can be set up within this file.
+* These are global variables which effect the operation of the entire software suite and for now are meant to be set up permanently for the entirety of the run of a particular instance of SocialPredict.
+
+```
+economics:
+  marketcreation:
+    initialMarketProbability: 0.5
+    initialMarketSubsidization: 10
+    initialMarketYes: 0
+    initialMarketNo: 0
+  marketincentives:
+    createMarketCost: 1
+    traderBonus: 2
+  user:
+    initialAccountBalance: 0
+    maximumDebtAllowed: 500
+  betting:
+    minimumBet: 1
+    betFee: 0
+    sellSharesFee: 0
+```
+
+* We may implement variable economics in the future, however this might need to come along with transparency metrics, which show how the economics were changed to users, which requires another level of data table to be added.

README/README-CONVENTIONS.md

@@ -0,0 +1,84 @@
+# SocialPredict Coding Conventions
+
+The following is a documentation of various coding conventions used to keep SocialPredict clean, maintainable and secure.
+
+
+## Backend
+
+### Specific Data Structs for Private and Public Responses
+
+* For certain sensitive databases such as Users, there is Private information and Public information. When information from the Users table is needed to be combined with other types of tables such as Bets or Markets, we must be sure to use a function which specifically only returns public information that we explicitly allow, to prevent private information or even private fields from leaking through into API responses.
+* This provides a balance between creating a more secure application and reducing queries on the database or building confusing queries on the database side.
+* If private information is needed, for example in a User's profile page, then a different struct and retrival function must be used.
+* The below is an example and the packages or code may have changed since this was authored, but the principle remainds the same.
+
+#### Example Type Setup and Retrieval Function
+
+```
+// PublicUserType is a struct for user data that is safe to send to the client for Profiles
+type PublicUserType struct {
+	Username              string  `json:"username"`
+	DisplayName           string  `json:"displayname" gorm:"unique;not null"`
+	UserType              string  `json:"usertype"`
+	InitialAccountBalance float64 `json:"initialAccountBalance"`
+	AccountBalance        float64 `json:"accountBalance"`
+	PersonalEmoji         string  `json:"personalEmoji,omitempty"`
+	Description           string  `json:"description,omitempty"`
+	PersonalLink1         string  `json:"personalink1,omitempty"`
+	PersonalLink2         string  `json:"personalink2,omitempty"`
+	PersonalLink3         string  `json:"personalink3,omitempty"`
+	PersonalLink4         string  `json:"personalink4,omitempty"`
+}
+
+...
+
+// Function to get the Info From the Database
+func GetPublicUserInfo(db *gorm.DB, username string) PublicUserType {
+
+	var user models.User
+	db.Where("username = ?", username).First(&user)
+
+	return PublicUserType{
+		Username:              user.Username,
+		DisplayName:           user.DisplayName,
+		UserType:              user.UserType,
+		InitialAccountBalance: user.InitialAccountBalance,
+		AccountBalance:        user.AccountBalance,
+		PersonalEmoji:         user.PersonalEmoji,
+		Description:           user.Description,
+		PersonalLink1:         user.PersonalLink1,
+		PersonalLink2:         user.PersonalLink2,
+		PersonalLink3:         user.PersonalLink3,
+		PersonalLink4:         user.PersonalLink4,
+	}
+}
+```
+
+#### Example Usage In Another Package
+
+* Note that `publicCreator` is used as the value Creator: in the response struct.
+* If we had alternatively just used, "user" from the database, private info would be leaked.
+* If we had not explicitly built the custom struct above, certain sensitive fields such as, "email:" could have been leaked, even if they were blank. This is unprofessional.
+* Using the custom struct from a single package promotes code reusability.
+
+```
+	// get market creator
+	// Fetch the Creator's public information using utility function
+	publicCreator := usersHandlers.GetPublicUserInfo(db, market.CreatorUsername)
+
+	// Manually construct the response
+	response := struct {
+		Market             PublicResponseMarket                   `json:"market"`
+		Creator            usersHandlers.PublicUserType           `json:"creator"`
+		ProbabilityChanges []marketMathHandlers.ProbabilityChange `json:"probabilityChanges"`
+		NumUsers           int                                    `json:"numUsers"`
+		TotalVolume        float64                                `json:"totalVolume"`
+	}{
+		Market:             responseMarket,
+		Creator:            publicCreator,
+		ProbabilityChanges: probabilityChanges,
+		NumUsers:           numUsers,
+		TotalVolume:        marketVolume,
+	}
+
+```

README/README-ROADMAP.md

@@ -0,0 +1,19 @@
+# Non-Binding Software Roadmap
+
+Here is a general list of bullet points without promise dates. This is a general non-binding road map showing where the software will go in the future.
+
+This road map is as up to date as the last time the file was committed on Github.
+
+### Roadmap
+
+* Improved Frontend User Interface
+* Capability to View Own Profile, Trades, Markets and Change Secure Information
+* Positions Displayable on Markets
+* Comments
+* Capability to Sell Shares
+* Market Search
+* View Market by Status, Resolved, Closed, Otherwise
+* Leaderboards
+* Mobile Compatibility
+* One-Command to Build All Dockerfiles
+* Production Version Separated from Development Version

frontend/src/About.js

@@ -11,7 +11,7 @@ function About() {
 
                 <p>Have you heard of Prediction Markets?</p>
                 <ul>
-                    <li>Prediction Markets, unlike polls, incentivize accuracy. Participants take a stake in what they think is correct, promoting rigorous reseasrch and reducing bias.</li>
+                    <li>Prediction Markets, unlike polls, incentivize accuracy. Participants take a stake in what they think is correct, promoting rigorous research and reducing bias.</li>
                     <li>In contrast, social media posts and polls, using upvotes and downvotes or having users choose with no stake, are not as robust.</li>
                     <li>Of course as with anything, the knowledge of a community is tied to the ability of the participants.</li>
                     <li>Our solution is to empower individuals to run their own prediction market platforms to attempt to use the wisdom of their own crowds to out-predict one another.</li>

frontend/src/MarketDetails.css

@@ -118,7 +118,7 @@
     display: flex;
     bottom: 20px;
     right: 20px;
-    background-color: grey;
+    background-color: #6A6A6A;
     border-radius: 3px; /* Rounded corners */
     color: white;
     border: none;
@@ -218,18 +218,54 @@
     transition: background-color 0.3s;
 }
 
-/* Bottom Modal Bottom */
+/* Bottom Modal - Comments, Positions, Bets */
+
+.toggle-button {
+    display: flex;
+    margin: 20px; /* Adjust positioning as needed */
+    background-color: #6A6A6A; /* A different shade of grey */
+    border-radius: 4px; /* Slightly more rounded corners */
+    color: white;
+    border: none;
+    outline: none;
+    padding: 12px 24px; /* Slightly larger padding */
+    transition: background-color 0.3s, transform 0.2s; /* Add transform to hover effect */
+    cursor: pointer;
+}
+
+.toggle-button:hover {
+    color: white;
+    background-color: #5D9C8B; /* A distinct hover color */
+    transform: scale(1.05); /* Slight increase in size on hover */
+}
 
 .modal {
     /* Basic modal styling */
 }
-.modal-tabs button {
-    /* Styling for tab buttons */
+
+.modal-tabs {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* Ensure there's no additional styling causing the buttons to stack vertically */
 }
-.modal-content {
-    /* Styling for the content area of the modal */
+
+.modal-tabs .tab-button {
+    background-color: #6A6A6A; /* Similar shade of grey */
+    border-radius: 4px;
+    color: white;
+    border: none;
+    outline: none;
+    padding: 12px 24px;
+    transition: background-color 0.3s, transform 0.2s;
+    cursor: pointer;
+    margin: 0 5px; /* Spacing between buttons */
 }
 
+.modal-tabs .tab-button:hover {
+    background-color: #5D9C8B;
+    transform: scale(1.05);
+}
 /* BETs Display at Bottom */
 
 .bets-display {

frontend/src/MarketDetails.js

@@ -78,16 +78,16 @@ const ModalContent = ({ activeTab, changeTab, bets, toggleModal }) => {
 
         <div className="modal">
             <div className="modal-tabs">
-                <button onClick={() => changeTab('Comments')}>Comments</button>
-                <button onClick={() => changeTab('Positions')}>Positions</button>
-                <button onClick={() => changeTab('Bets')}>Bets</button>
+                <button className="tab-button" onClick={() => changeTab('Comments')}>Comments</button>
+                <button className="tab-button" onClick={() => changeTab('Positions')}>Positions</button>
+                <button className="tab-button" onClick={() => changeTab('Bets')}>Bets</button>
             </div>
             <div className="modal-content">
                 {activeTab === 'Comments' && <p>Comments Coming Soon.</p>}
                 {activeTab === 'Positions' && <p>Positions Coming Soon.</p>}
                 {activeTab === 'Bets' && (
                     <div className="bets-display">
-                        <h3>Bets</h3>
+                        <h5></h5>
                         <table>
                             <thead>
                                 <tr>
@@ -487,8 +487,6 @@ function MarketDetails() {
                 </div>
             )}
 
-            <button onClick={toggleModal}>Toggle Activity</button>
-
             {isModalOpen && (
                 <ModalContent
                     activeTab={activeTab}